Canvas é um elemento HTML que permite a renderização dinâmica e programável de formas 2D, formas 3D, imagens bitmap e animações em 2D e 3D.
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...
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 que eu...
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
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...
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 o resultado final seja...
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...
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 =...
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...
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...
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...
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...
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...
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:
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
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"...
Estou tentando redimensionar algumas imagens com tela, mas não tenho a menor ideia de como suavizá-las. No photoshop, navegadores, etc. existem alguns algoritmos que eles usam (por exemplo, bicúbico, bilinear), mas não sei se eles são integrados ao canvas ou não. Aqui está meu violino:...
Fechado . Esta questão precisa ser mais focada . Atualmente não está aceitando respostas. Quer melhorar esta questão? Atualize a pergunta para que ela se concentre em apenas um problema, editando esta postagem . Fechado há 7 anos . Melhore esta...
Eu sou um total n00b com HTML5e estou trabalhando com a canvasprestar formas, cores, e texto. Em meu aplicativo, tenho um adaptador de visualização que cria uma tela dinamicamente e a preenche com conteúdo. Isso funciona muito bem, exceto que meu texto fica muito confuso / borrado / esticado. Já...
Estou usando um gráfico de medidor baseado em ( Chartjs-tsgauge ). Quero definir cores de plano de fundo para o gráfico separadas dos limites do medidor. O problema de como o Charts.JS renderiza o plano de fundo porque o plug-in que usei não possui um código sobre o plano de fundo. Por exemplo, eu...
Isso está dentro do projeto Bismon (um software GPLv3 + financiado por projetos europeus do H2020), git commit0e9a8eccc2976f . Este rascunho de relatório descreve o software. Esta questão fornece mais contexto e motivações. Trata -se do arquivo webroot / jscript / bismon-hwroot.js (escrito à mão) ,...