Preguntas etiquetadas con html5-canvas

Después de experimentar con operaciones compuestas y dibujar imágenes en el lienzo, ahora estoy tratando de eliminar imágenes y componer. ¿Cómo hago esto? Necesito limpiar el lienzo para volver a dibujar otras imágenes; esto puede continuar por un tiempo, así que no creo que dibujar un nuevo rectángulo cada vez …

1013 javascript  html  canvas  html5-canvas  composite 

¿Cuál es el mejor enfoque para crear elementos sobre la marcha y poder moverlos? Por ejemplo, supongamos que quiero crear un rectángulo, círculo y polígono y luego seleccionar esos objetos y moverlos. Entiendo que HTML5 proporciona tres elementos que pueden hacer esto posible: svg , canvas y div . Para …

476 javascript  html  svg  html5-canvas 

¿Cómo puedo escalar automáticamente el <canvas>elemento HTML5 para que se ajuste a la página? Por ejemplo, puedo obtener una <div>escala ajustando las propiedades heighty widthal 100%, pero una <canvas>escala no, ¿verdad?

400 javascript  html  html5-canvas 

Estoy trabajando en un proyecto de arte generativo en el que me gustaría permitir a los usuarios guardar las imágenes resultantes de un algoritmo. La idea general es: Cree una imagen en un lienzo HTML5 utilizando un algoritmo generativo Cuando se completa la imagen, permita a los usuarios guardar el …

261 javascript  php  ajax  html5-canvas 

Quiero tener una página web que tenga una palabra centrada. Quiero que esta palabra se dibuje con una animación, de modo que la página "escriba" la palabra de la misma manera que lo haríamos, es decir, comienza en un punto y dibuja líneas y curvas con el tiempo de modo …

229 javascript  css  canvas  html5-canvas  css-shapes 

Estoy usando la herramienta JavaScript "Canvas2Image" de Nihilogic para convertir dibujos de lienzo en imágenes PNG. Lo que necesito ahora es convertir esas cadenas base64 que genera esta herramienta, en archivos PNG reales en el servidor, usando PHP. En resumen, lo que estoy haciendo actualmente es generar un archivo en …

212 php  javascript  base64  html5-canvas 

Quiero guardar mi lienzo en un img. Tengo esta función: function save() { document.getElementById("canvasimg").style.border = "2px solid"; var dataURL = canvas.toDataURL(); document.getElementById("canvasimg").src = dataURL; document.getElementById("canvasimg").style.display = "inline"; } Me da error: SecurityError no capturado: no se pudo ejecutar 'toDataURL' en 'HTMLCanvasElement': los lienzos contaminados no se pueden exportar. ¿Qué tengo …

187 javascript  html5-canvas 

Las fotos de la cámara digital a menudo se guardan como JPEG con una etiqueta de "orientación" EXIF. Para que se muestren correctamente, las imágenes deben girarse / reflejarse según la orientación establecida, pero los navegadores ignoran esta información que representa la imagen. Incluso en grandes aplicaciones web comerciales, el …

154 javascript  rotation  html5-canvas  exif 

Utilizo elementos de lienzo html5 para cambiar el tamaño de las imágenes en mi navegador. Resulta que la calidad es muy baja. Encontré esto: deshabilite la interpolación al escalar un <canvas> pero no ayuda a aumentar la calidad. A continuación se muestra mi código css y js, así como la …

149 javascript  css  html  canvas  html5-canvas 

Para una aplicación de dibujo, guardo las coordenadas de movimiento del mouse en una matriz y luego las dibujo con lineTo. La línea resultante no es suave. ¿Cómo puedo producir una sola curva entre todos los puntos reunidos? Busqué en Google pero solo encontré 3 funciones para dibujar líneas: para …

133 javascript  canvas  html5-canvas  bezier  spline 

Mi código funciona muy bien en mi localhost pero no funciona en el sitio. Recibí este error de la consola, para esta línea .getImageData(x,y,1,1).data: Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. parte de mi código: jQuery.Event.prototype.rgb=function(){ var x = this.offsetX || …

131 javascript  html  html5-canvas 

Me gustaría rotar las fotos según su rotación original, según lo establecido por la cámara en los datos de imagen JPEG EXIF. El truco es que todo esto debería suceder en el navegador, usando JavaScript y <canvas>. ¿Cómo podría JavaScript acceder a JPEG, un objeto API de archivo local, local …

125 javascript  jpeg  exif  html5-canvas 

He estado tratando de cambiar lo que parece ser el color de fondo predeterminado de mi lienzo de negro a transparente / cualquier otro color, pero no tuve suerte. Mi HTML: <canvas id="canvasColor"> Mi CSS: <style type="text/css"> #canvasColor { z-index: 998; opacity:1; background: red; } </style> Como puede ver en …

122 css  html  canvas  html5-canvas  three.js 

¿Hay alguna razón, excepto el rendimiento, para usar WebGL en lugar de 2D-Canvas para juegos / aplicaciones 2D ? En otras palabras, ¿qué funcionalidades 2D ofrece WebGL que no se pueden lograr fácilmente con 2D-Canvas?

112 html  html5-canvas  webgl 

Estoy tratando de apilar dos lienzos juntos y convertirlos en un lienzo de doble capa. He visto un ejemplo aquí: <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> Pero me …

103 css  html5-canvas