Perguntas com a marcação «html5-canvas»

Depois de experimentar operações compostas e desenhar imagens na tela, agora estou tentando remover imagens e composição. Como eu faço isso? Preciso limpar a tela para redesenhar outras imagens; isso pode continuar por um tempo, então não acho que desenhar um novo retângulo toda vez seja a opção mais eficiente.

1013 javascript  html  canvas  html5-canvas  composite 

Qual é a melhor abordagem para criar elementos em tempo real e poder movê-los? Por exemplo, digamos que eu queira criar um retângulo, círculo e polígono, selecione esses objetos e mova-os. Entendo que o HTML5 fornece três elementos que podem tornar isso possível: svg , canvas e div . Pelo …

476 javascript  html  svg  html5-canvas 

Como posso dimensionar automaticamente o <canvas>elemento HTML5 para caber na página? Por exemplo, posso obter um <div>escalonamento definindo as propriedades heighte widthpara 100%, mas um <canvas>não escalará, não é?

400 javascript  html  html5-canvas 

Estou trabalhando em um projeto de arte generativo em que gostaria de permitir que os usuários salvem as imagens resultantes de um algoritmo. A ideia geral é: Crie uma imagem em uma tela HTML5 usando um algoritmo generativo Quando a imagem estiver concluída, permita aos usuários salvar a tela como …

261 javascript  php  ajax  html5-canvas 

Eu quero ter uma página da web que tenha uma palavra centralizada. Quero que essa palavra seja desenhada com uma animação, de modo que a página "escreva" da mesma maneira que gostaríamos, ou seja, começa em um ponto e desenha linhas e curvas ao longo do tempo, de modo que …

229 javascript  css  canvas  html5-canvas  css-shapes 

Estou usando a ferramenta JavaScript "Canvas2Image" da Nihilogic para converter desenhos de tela em imagens PNG. O que eu preciso agora é transformar as strings base64 que essa ferramenta gera, em arquivos PNG reais no servidor, usando PHP. Em resumo, o que estou fazendo atualmente é gerar um arquivo no …

212 php  javascript  base64  html5-canvas 

Quero salvar minha tela em um img. Eu tenho esta função: function save() { document.getElementById("canvasimg").style.border = "2px solid"; var dataURL = canvas.toDataURL(); document.getElementById("canvasimg").src = dataURL; document.getElementById("canvasimg").style.display = "inline"; } Isso me dá erro: Não detectado SecurityError: falha ao executar 'toDataURL' em 'HTMLCanvasElement': telas contaminadas não podem ser exportadas. O que …

187 javascript  html5-canvas 

As fotos das câmeras digitais geralmente são salvas como JPEG com uma etiqueta de "orientação" EXIF. Para exibir corretamente, as imagens precisam ser giradas / espelhadas, dependendo da orientação definida, mas os navegadores ignoram essas informações que renderizam a imagem. Mesmo em grandes aplicativos comerciais da Web, o suporte à …

154 javascript  rotation  html5-canvas  exif 

Eu uso elementos de tela html5 para redimensionar imagens no meu navegador. Acontece que a qualidade é muito baixa. Encontrei o seguinte: Desativar interpolação ao dimensionar um <canvas> mas isso não ajuda a aumentar a qualidade. Abaixo está o meu código css e js, bem como a imagem scalled com …

149 javascript  css  html  canvas  html5-canvas 

Para um aplicativo de desenho, estou salvando as coordenadas de movimento do mouse em uma matriz e desenhando-as com lineTo. A linha resultante não é suave. Como posso produzir uma única curva entre todos os pontos reunidos? Eu pesquisei no Google, mas encontrei apenas 3 funções para desenhar linhas: para …

133 javascript  canvas  html5-canvas  bezier  spline 

Meu código está funcionando muito bem no meu host local, mas não está funcionando no site. Eu recebi esse erro do console, para esta linha .getImageData(x,y,1,1).data: Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. parte do meu código: jQuery.Event.prototype.rgb=function(){ var x = …

131 javascript  html  html5-canvas 

Gostaria de girar as fotos com base na rotação original, conforme definido pela câmera nos dados de imagem JPEG EXIF. O truque é que tudo isso deve acontecer no navegador, usando JavaScript e <canvas>. Como o JavaScript pode acessar o JPEG, um objeto de API de arquivo local, local <img>ou …

125 javascript  jpeg  exif  html5-canvas 

Eu tenho tentado mudar o que parece ser a cor de fundo padrão da minha tela de preto para transparente / qualquer outra cor - mas sem sorte. Meu HTML: <canvas id="canvasColor"> Meu CSS: <style type="text/css"> #canvasColor { z-index: 998; opacity:1; background: red; } </style> Como você pode ver no …

122 css  html  canvas  html5-canvas  three.js 

Existe algum motivo, exceto desempenho, para usar WebGL em vez de 2D-Canvas para jogos / aplicativos 2D ? Em outras palavras, quais funcionalidades 2D são oferecidas pelo WebGL que não são possíveis de alcançar facilmente com 2D-Canvas?

112 html  html5-canvas  webgl 

Estou tentando empilhar duas telas juntas e torná-las uma tela de camadas duplas. Eu vi um exemplo aqui: <div style="position: relative;"> <canvas id="layer1" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> <canvas id="layer2" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> </div> Mas eu gostaria de …

103 css  html5-canvas