Tag: canvas

Lienzo, deshabilitar descarga de imagen

Estoy haciendo un juego en html5 / js, hay un mapa con una niebla de guerra en él. Cuando haces clic con el botón derecho en el canvas, puedes guardar el canvas como una imagen y así puedes tener todo el mapa en un jpg, pero ese mapa debe estar oculto. ¿Hay algún truco para […]

icono de canvas de la extensión de Google Chrome

Estoy tratando de establecer el icono de extensión a una imagen de canvas. Parece que no puedo conseguirlo para establecer. Solo quiero que los conceptos básicos funcionen y se expandan desde allí. Puedo configurar el icono con una imagen en la estructura del archivo, pero quiero poder actualizar el texto de forma dinámica más adelante. […]

¿Cómo eliminar la stack de estado para un contexto de representación de canvas de JavaScript?

Recientemente estuve trabajando con en JavaScript y descubrí la posibilidad de crear una “pérdida de memoria” realmente mala (más como una explosión de memoria). Al trabajar con el contexto del canvas, tiene la capacidad de hacer context.save() para agregar los estilos de dibujo a la “stack de estado” y context.restre() para eliminarlo. (Consulte la documentación […]

Línea de canvas suave y en el punto de inicio del cursor.

Estoy intentando crear una aplicación web de canvas y tengo dos problemas principales. Me encantaría hacer que la herramienta pluma dibuje más suavemente. En segundo lugar, cada vez que borro el boceto y empiezo a dibujar de nuevo, la línea comienza en un punto diferente al cursor / mouse. Aquí está javascript para mi herramienta […]

SVG renderizado en canvas borroso en pantalla retina

Tengo un problema con SVG renderizado en canvas. En la retina, el canvas representado como url base64 y configurado como SRC está borroso. He intentado varios métodos que se describen en la lista a continuación sin suerte: https://tristandunn.com/2014/01/24/rendering-svg-on-canvas/ ¿Cómo corrijo el texto borroso en mi canvas HTML5? Lienzo de dibujo y pantalla Retina: ¿factible? https://www.html5rocks.com/en/tutorials/canvas/hidpi/ […]

Cómo rellenar con imágenes en canvas html5

Estoy usando esta rueda de giro http://tpstatic.com/_sotc/sites/default/files/1010/source/roulettewheel.html Quiero cambiar el color de fondo a las imágenes de fondo. No tengo ni idea de cómo hacerlo. Si alguien tiene la amabilidad de mostrarme el camino de agregar imágenes a formas / elementos de canvas. Sé que tiene algo que ver con fillStyle (). Aquí está el […]

Imprimir contenidos de canvas

var print = document.createElement(‘button’); var canvas = document.createElement(‘canvas’); var ctx = canvas.getContext(‘2d’); canvas.width = 300; canvas.height = 100; ctx.fillStyle = ‘#000′; ctx.font = ’15px sans-serif’; ctx.fillText(‘Fill Text, 18px, sans-serif’, 10, 20); print.innerHTML = ‘Print’; document.body.appendChild(print); document.body.appendChild(canvas); print.addEventListener(‘click’, function () { window.print(); }); http://jsfiddle.net/vpetrychuk/LWup5/ . Como puede ver, el texto en el canvas se muestra bien, […]

Imagen de canvas HTML a problema Base64

Tengo problemas para recuperar la versión base64 de una imagen que se muestra en un canvas. He analizado las otras preguntas, pero ninguna de las soluciones que incluyen canvas2image parece funcionar. Aquí está mi código: #canvas {cursor: pointer;} var can = document.getElementById(‘canvas’); var ctx = can.getContext(‘2d’); var img = new Image(); img.onload = function(){ can.width […]

JS Canvas animar elementos de rejilla individualmente

Estoy generando una cuadrícula de hexágonos utilizando un bucle for y tengo algunos problemas. for (var i=0; i <= rows; i++) { for (var j=0; j <= cols; j++) { ctx.save(); ctx.translate(0+i*distX, 0+j*distY); drawHexagon(ctx); ctx.fill(); ctx.restore(); } } Mi objective final es crear una cuadrícula de hexágonos que se alejan del cursor del mouse cuando […]

Detección de colisión de texto

Estoy construyendo una aplicación web que dibuja un conjunto de letras en diferentes fonts en un Canvas HTML 5 usando fillText . El usuario hará clic en algún lugar de ese canvas y debo comprobar en qué letra han hecho clic (o si han hecho clic en una letra). Creo que necesitaré: Obtén la ruta […]

Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.