Articles of html5 canvas

Creando un efecto de arco iris en canvas rectangular

Me gustaría saber cómo crear un efecto de arco iris en mi canvas en el estilo de relleno, como para que cambie de color en ciertos intervalos o cuando presiono una tecla continuamente. Me gusta del rojo al azul, etc., similar a cómo puedes agregar un efecto de arco iris al texto. var GAME_SPEED = […]

Resultado distorsionado con fabric.loadSVGFromString

He editado un SVG con inkscape: image/svg+xml Debe tener un aspecto como este: Cuando lo importe con fabricjs: // volumeOnPrint is the string pasted before fabric.loadSVGFromString(volumeOnPrint, function(objects, options) { var widget = new fabric.PathGroup(objects, options); // root is my fabricjs canvas root.add(widget); }); Se consigue que: (El fondo no es el problema, es el de […]

Dibujar una forma de X en un canvas HTML5 y verificar las colisiones con un borde

Estoy trabajando en un juego de laberinto en HTML 5. Esta es la función que utilizo para dibujar una “X” en el canvas (con el panel táctil, el usuario navegará la X a través del laberinto). dim = 8; function rect(x,y,xdim){ ctx.beginPath(); ctx.moveTo(x – xdim, y – xdim); ctx.lineTo(x + xdim, y + xdim); ctx.moveTo(x […]

Se rechaza la carga de imágenes de origen cruzado desde el sitio con habilitación cruzada

Estoy intentando usar la imagen habilitada para CORS que se encuentra en el sitio habilitado para cors: dropbox.com. Tengo un error: carga de imagen de origen cruzado denegada por la política CORS. ¿Como arreglarlo? var img = new Image(); img.crossOrigin = “anonymous”; var canvas = document.createElement(“canvas”); img.onload = function () { canvas.width = img.width; canvas.height […]

¿Por qué la velocidad de mi personaje de juego es diferente en diferentes computadoras?

Estoy desarrollando un juego en línea usando Java Script. Estoy usando el método setInterval (movimage, 10) para mover el personaje del juego. Pero he visto que la velocidad de movimiento del personaje del juego no es la misma que toda la computadora. Por favor sugiéreme

Modular colores con drawImage en canvas HTML5

Estoy jugando con la idea de modificar mi IDE de desarrollo de juegos para producir versiones HTML5 de los juegos creados con él. Una de las características del IDE es la capacidad de definir fotogtwigs, que no solo definen cómo se transforma (se gira, se estira, etc.) una celda de gráficos, sino también cómo se […]

El canvas de tamaño negro no desvanece completamente los dibujos a negro con el tiempo

Tengo un canvas negro con cosas que se dibujan en su interior. Quiero que las cosas dibujadas en el interior se desvanezcan a negro, con el tiempo, en el orden en que se dibujan (FIFO). Esto funciona si uso un canvas que no ha sido redimensionado. Cuando se cambia el tamaño del canvas, los elementos […]

Lienzo HTML haciendo formas borrosas

Quiero hacer formas simples usando HTML. Pero las formas tienen que ser grandes. Y el canvas está en pantalla completa. Ejemplo: http://jsfiddle.net/xLgg43s9/1/embedded/result/ Código: Untitled Document * { margin: 0; padding: 0;} body, html { height:100%; } #canvas { position:absolute; width:100%; height:100%; } var canvas=document.getElementById(“canvas”); var ctx=canvas.getContext(“2d”); ctx.fillStyle = “#000″; var w=canvas.width; var h=canvas.height; ctx.fillRect(0,0,w,h); ctx.fillStyle=”#fff”; […]

Dibujando un SVG modificado a un canvas

Quiero cargar una imagen SVG, hacer algunas manipulaciones en su .contentDocument y luego dibujarla en un canvas. Un buen ejemplo para dibujar un SVG en un canvas es aquí: http://www.phrogz.net/tmp/canvas_from_svg.html Pero en este ejemplo, el svg se creó como un new Image(‘url.svg’) . Cuando creas un SVG de esa manera, desafortunadamente no parece tener un […]

KineticJS Canvas – Grupo de escala desde el punto central

Quiero escalar mi grupo (imagen y algo). group.setScale(zoom, zoom); http://jsfiddle.net/K8nK3/ Pero cuando escala mi grupo, creo que no es escala desde el centro de mi grupo. lo pienso asi La quiero desde el centro como Intento más pero no es éxito. ¿Cómo puedo hacer eso, gracias.