Articles of html5 canvas

Dibujar la ruta de HTML5 / Javascript Canvas en el tiempo

Digamos que tengo un camino: var context = canvas.getContext(‘2d’); context.beginPath(); context.moveTo(100, 20); context.lineTo(200, 160); context.quadraticCurveTo(230, 200, 250, 120); context.bezierCurveTo(290, -40, 300, 200, 400, 150); context.lineTo(500, 90); context.lineWidth = 5; context.strokeStyle = ‘blue’; context.stroke(); Esto imprime el camino de una vez: ¿Cómo puedo dividir la ruta en subtrazos de longitud determinada? Por ejemplo: context.splitCurrentPathIntoSubPath(0, 0.75) debería […]

Zoom y panorámica en un canvas animado de HTML5

Tengo un mapa Quiero que un usuario pueda acercar y alejar el mapa. Imagina Google Maps, pero en lugar de ser infinitamente pannable, el mapa es un cuadrado (no se envuelve nuevamente si pasas el borde del mismo). Implementé zoom y pan usando scale() y translate() . Estos funcionan bien Estoy atascado en la parte […]

Cómo incluir estilo CSS al convertir svg a png

He creado un elemento simple SVG que se dowbloaded a png al hacer clic en un botón, mi solución es similar a aquí La idea básica es: 1.svg al canvas 2. puede acceder a dataUrl Descarga 3.trigger de dataUrl el problema es que al descargar el archivo png no incluye el estilo css aplicado en […]

canvas2d toDataURL () salida diferente en un navegador diferente

Tengo la misma imagen y el mismo tamaño de canvas, pero el resultado es diferente. Quiero el mismo resultado, ¿cómo debería hacerlo? var canvas = document.createElement(‘canvas’), ctx = canvas.getContext(‘2d’), img = new Image; img.crossOrigin = ‘Anonymous’; img.onload = function(){ canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL(); setBreakpoint(dataURL); callback.call(this, dataURL); […]

canvas.toDataURL () para canvas grande

Tengo un problema con .toDataURL() para canvass grandes. Quiero enconde en base64 y decodificar en el archivo php, pero si tengo un canvas grande, la variable strDataURI está vacía. Mi código: var strDataURI = canvas.toDataURL(); strDataURI = strDataURI.substr(22, strDataURI.length); $.post(“save.php”, { str: strDataURI }; ¿Hay alguna alternativa a .toDataURL() o alguna forma de cambiar el […]

Múltiples áreas de recorte en el canvas Fabric.js

Para hacer Photo Collage Maker , utilizo fabric js que tiene una función de recorte basada en objetos. Esta característica es excelente, pero la imagen dentro de esa región de recorte no se puede escalar, mover o rotar. Quiero que la región de recorte de posición fija y la imagen se puedan colocar dentro del […]

Cómo hacer efecto de texto de techo y efecto de texto de valle en HTML5 (o Fabric.js)

Estoy usando el siguiente código: // Curve: 110 OffsetY: 0 Text height: 64 Bottom: 200 Text: Necesito el efecto de texto como las imágenes de abajo, he intentado mucho para hacer esto, pero no puedo. ¿Por favor, puede alguien ayudarme? ¿También podemos usar el objeto activo de fabric.js con el contexto?

Html5 canvas drawImage: cómo aplicar antialiasing

Por favor, 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,400,150); } img.src=”http://openwalls.com/image/1734/colored_lines_on_blue_background_1920x1200.jpg”; Como puede ver, la imagen no está anti-alias, aunque se dice que drawImage aplica anti aliasing automáticamente. Intenté muchas maneras diferentes, pero parece que no funciona. ¿Podría decirme cómo puedo obtener una imagen antialias? […]

CanvasContext2D drawImage () issue

dataURL() pintar una imagen en un canvas antes de obtener su dataURL() , pero los datos devueltos son como vacíos. Cuando lo miro en la consola, veo que hay una gran cantidad de A en la cadena: ( “data:image/png;base64,iVBO..some random chars… bQhfoAAAAAAAAAA… a lot of A …AAAASUVORK5CYII=” ) Cuando bash agregar el canvas al documento, […]