Canvas es un elemento HTML que permite la representación dinámica y mediante secuencias de comandos de formas 2D, formas 3D, imágenes de mapa de bits y animaciones tanto en 2D como en 3D.
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...
¿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 ....
¿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,
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...
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 que el resultado final sea...
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...
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...
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...
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...
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:...
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...
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...
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:...
¿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
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...
Estoy tratando de cambiar el tamaño de algunas imágenes con lienzo, pero no tengo ni idea de cómo suavizarlas. En photoshop, navegadores, etc. hay algunos algoritmos que usan (por ejemplo, bicúbicos, bilineales) pero no sé si están integrados en el lienzo o no. Aquí está mi violín:...
Cerrado . Esta pregunta debe estar más enfocada . Actualmente no acepta respuestas. ¿Quieres mejorar esta pregunta? Actualice la pregunta para que se centre en un solo problema editando esta publicación . Cerrado hace 7 años . Mejora esta pregunta...
Eche un vistazo al siguiente ejemplo: http://jsfiddle.net/MLGr4/47/ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); img = new Image(); img.onload = function(){ canvas.width = 400; canvas.height = 150; ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0,...
¿Hay alguna forma de leer el contenido de un lienzo HTML como datos binarios? Por el momento, tengo el siguiente HTML para mostrar un archivo de entrada y el lienzo debajo de él: <p><button id="myButton" type="button">Get Image
Estoy usando un gráfico de indicadores basado en ( Chartjs-tsgauge ). Quiero establecer los colores de fondo para el gráfico por separado de los límites del medidor. El problema con cómo Charts.JS representa el fondo porque el complemento que utilicé no tiene un código sobre fondos. Por ejemplo,...