Tag: html5

HTML5: canvas loco dibujar tamaño de imagen

Tengo la siguiente plantilla html: Snap Photo Aquí está la captura de pantalla de mi aplicación. En la parte superior puede ver y en la parte inferior (foco en devtools). Problema: para dibujar imagen a debería usar estos coeficientes extraños: const canvas = document.getElementById(‘canvas’), context = canvas.getContext(“2d”), video = document.getElementById(‘video’); //QUESTION: why?! const widthCoef = […]

simular un ratón hacia abajo y hacia arriba en una página html5 de canvas

¿Cómo puedo simular un mouse hacia abajo y luego seguir un evento de mouse up en una sección hmtl5 de canvas de una página aspx? Busqué en la web y encontré esto … pero no puedo correlacionarlo con el elemento html5 de mi canvas. ¿Puede alguien ayudarme? dispatchMouseEvent(element, ‘mouseover’, true, true); dispatchMouseEvent(element, ‘mousedown’, true, true); […]

HTML5 Canvas Text Animando alrededor del círculo

¿Actualizado lo que está mal con el código? Sé que no gira, pero ¿por qué es el texto estropeado. ¿Alguien sabe por qué me estoy arrancando el pelo tratando de resolver esto? function showCircularNameRotating(string, startAngle, endAngle){ //context.clearRect(0, 0, canvas.width, canvas.height); context.font = ’32pt Sans-Serif’; context.fillStyle = ‘#1826B0’; circle = { x: canvas.width/2, y: canvas.height/2, radius: […]

Arrastrar y soltar imágenes en canvas

Quiero arrastrar las imágenes generadas fuera del canvas hacia el canvas, dibujar algunas líneas y formas y moverme fuera del canvas. Utilicé las funciones touchstart / touchmove para rastrear las imágenes que se arrastran, pero cuando las muevo sobre el canvas, puedo colocarlas en el canvas y dibujar no afecta a ninguna imagen. A continuación […]

Video HTML5: ¿Cómo hacer una reproducción perfecta y / o un bucle de varios videos?

¿Cómo puedo reproducir varios videos de manera confiable uno tras otro sin problemas? Como hay una pequeña pausa o parpadeo entre la reproducción de 2 videos. En mi ejemplo particular tengo 3 videos. Necesito reproducir los 3 a la perfección uno tras otro, y también tengo que hacer un bucle en el video intermedio una […]

Escriba texto personalizado en el canvas de la imagen con fabric.js y HTML5

Estoy usando HTML5 y fabric.js para subir varias imágenes. Quiero añadir texto personalizado en este canvas de imagen. En este momento estoy cargando varias imágenes en el canvas una por una. Después de subir las imágenes quiero agregar texto personalizado en el canvas. var canvas = new fabric.Canvas(‘canvas’); document.getElementById(‘file’).addEventListener(“change”,function (e) { var file = e.target.files[0]; […]

¿Cómo dibujar un círculo degradado lineal por svg?

Este es mi código, pero no es lo que quería. Espero que la distribución del color no sea simétrica. Necesito un efecto como este.

Lienzo: dibujar imagen no dibujar imagen a canvas

Estoy usando canvas para un juego. Tengo un objeto Sprite que se dibuja a sí mismo en el canvas, en la clase Sprite creo el miembro Image junto con su atributo src cuando creo el objeto. Aquí está el código que no funciona: Sprite.prototype.draw = function(Context){ this.Image.onLoad = function(){ Context.drawImage(this.getImage(),this.getX(),this.getY()); }; }; En el constructor […]

Cómo configurar la opción de exportación csv al botón en la visualización de Google Gráfico circular

Estoy utilizando el gráfico circular de visualización de Google para mostrar el estado de la transacción. Quiero exportar a csv, hay una barra de herramientas de funcionalidad para exportar csv, html, iGoogle, pero quiero especificarme a csv solo sin seleccionar opciones.

Consigue una animación suave para un juego de canvas.

Cómo obtener una mejor animación, dinámicamente, incluso cuando el navegador está ocupado o inactivo, para diferentes dispositivos que tienen diferentes capacidades de hardware. He intentado de muchas maneras y aún no puedo encontrar la manera correcta de hacer que el juego muestre una mejor animación. Esto es lo que intenté: var now; var then = […]

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