Articles of canvas

¿Cómo puedo duplicar una forma en el canvas de HTML5?

Tengo una forma semi-compleja y horizontalmente simétrica que estoy tratando de construir usando HTML5. Mientras intentaba terminarlo, me di cuenta de que sería más fácil si pudiera duplicar la mitad de la forma, reflejarla y moverla para unir las dos imágenes. Estoy encontrando ejemplos de cómo reflejar y mover una forma, pero no de cómo […]

¿Cómo podemos sincronizar dos elementos de canvas en páginas separadas?

Estoy en una situación en la que necesito copiar el canvas en otra página, ambas páginas están conectadas con socket.io, así que tengo un canal de comunicación. En lo que respecta a mi investigación, dije que puedo usar getImageData para obtener datos de píxeles y enviarlos a otra página para que esa página dibuje este […]

Javascript: dibujar un rectángulo en un canvas no funciona en IE

Tengo una aplicación web donde puedes dibujar un rectángulo en un canvas. Utilizo dos elementos de canvas: uno para la vista previa durante el dibujo y otro para colocarlo exactamente debajo del otro para dibujarlo. El problema que tengo es que en Internet Explorer, canvas2.width = canvas2.width no borra el contenido de canvas2, lo cual […]

El cursor personalizado no funciona correctamente en Chrome

Estoy teniendo problemas para que Chrome muestre mi cursor personalizado correctamente, pero parece funcionar correctamente en Firefox. Para dar un poco de contexto, como parte de mi bash de ponerme al día con HMLT5 / Javascript, estoy armando un mini juego de disparos usando el nuevo elemento de canvas y estoy usando un cursor de […]

cómo obtener activePointer presionó la duración del sprite en Phaser

Estoy creando un juego de pinball usando Phaser Framework . Cuando se presiona el soporte de la bola (verifique la captura de pantalla adjunta para tener una idea de lo que quiero decir), según la velocidad de la prensa, debe mover la bola alrededor del canal en espiral. Así que ahora intentamos detectar la duración […]

¿Cómo obtener valores rgb para un color que está cerca de otro color?

Si tengo un color en RGB. ¿Cómo puedo crear una función javascript que devuelva verdadero cuando otro valor de RGB esté cerca del RGB inicial y falso de lo contrario?

Javascript – problema de colisión círculo-círculo

Estoy haciendo un juego en HTML5, Canvas, y este es mi código para resolver colisiones entre dos círculos en movimiento: function resCCCol(a, b) { var dx = ax – bx; var dy = ay – by; var dist = dx * dx + dy * dy; var vx = b.vx – a.vx; var vy = […]

Extrapolar las coordenadas a los bordes del objeto canvas.

Estoy escribiendo una aplicación de navegador que intenta descubrir puntos de interés en una imagen. Una vez que he calculado estos puntos, trazo una línea entre ellos. Mi aplicación necesita extrapolar estas líneas a los bordes de mi canvas. ¿Alguien tiene alguna experiencia con el cálculo gráfico lineal en javascript? He hecho una demostración (function(){ […]

Creación de gráfico de área polar utilizando canvas

Estoy tratando de crear un gráfico de área polar usando el canvas aquí: http://jsfiddle.net/wm7pwL2w/2/ Código: var myColor = [“#ff0”, “#00f”, “#002”, “#003”, “#004”]; var myData = [10, 30, 20, 60, 40]; var myRadius = [120, 80, 40, 70, 40]; function getTotal() { var myTotal = 0; for (var j = 0; j < myData.length; j++) […]

¿Cómo controlar la velocidad de animación (requestAnimationFrame)?

Cambio el color del texto con requestAnimationFrame(animate); función: requestAnimationFrame(animate); function animate(time){ … // change text color here if (offset_s < offset_e) {requestAnimationFrame(animate);} } offset_s y offset_s indican las offset_s inicial y final del texto para el cambio de color. En algunos casos, la animación debe durar 2 segundos, pero en los casos de orden: 5 […]