Tag: canvas

canvas.toDataURL () da “Error de seguridad” en IE 11

Estoy trabajando en la herramienta basada en navegador para los distribuidores de medios que requieren cierta manipulación con el video. Tengo un reproductor de video HTML5 con video cargado desde otro dominio (ej. Http://video.com ). El dominio devuelve los siguientes encabezados para el video (intenta …-Origin con * y con un nombre de dominio específico): […]

2d html5 canvas colisión, howto

Como sugiere el título, estoy teniendo problemas con la colisión de objetos … Actualmente estoy trabajando en un juego de canvas de 2d Html5 con JavaScript. Sé cómo evitar que el objeto “jugador” salga del ancho / alto del canvas del juego, y sé cómo hacer algo cuando el jugador colisiona con un objeto (como […]

Fade canvas de vídeo de escala de grises a color

Tengo 2 elementos – video y canvas. En el evento de reproducción de video, una función dibuja el mismo video en el canvas solo en escala de grises. Luego tengo un botón que se supone que desvanece el color del canvas de la escala de grises al color. Hasta ahora he logrado recuperar los colores […]

¿Cómo usar las fonts de Google en el canvas al dibujar objetos DOM en SVG?

Según la documentación de Mozilla, puede dibujar HTML complejo en Canvas como este . Lo que no puedo entender es una forma de hacer que las fonts de Google funcionen con él. Vea este ejemplo a continuación: var canvas = document.getElementById(‘canvas’); var ctx = canvas.getContext(‘2d’); var data = ” + ” + ” + ‘test’ […]

¿Cómo guardar canvas de animación como gif o webm?

He escrito esta función para capturar cada fotogtwig para el GIF pero la salida es muy lenta y se bloquea cuando los datos aumentan. Alguna sugerencia ? Código: function createGifFromPng(list, framerate, fileName, gifScale) { gifshot.createGIF({ ‘images’: list, ‘gifWidth’: wWidth * gifScale, ‘gifHeight’: wHeight * gifScale, ‘interval’: 1 / framerate, }, function(obj) { if (!obj.error) { […]

La animación corporal no es fluida

La “nave espacial” en el siguiente código no se mueve sin problemas al comienzo de mantener presionada cualquier tecla de flecha hacia abajo. Se mueve un paso, se congela por una fracción de segundo y luego se mueve “suavemente”. ¿Cómo puedo hacer que se mueva sin problemas desde el principio, sin “congelar”? Mi código: Make […]

Manipulación de imágenes: agregue imágenes con esquinas en posiciones exactas

Tengo una imagen que es un fondo que contiene un área en caja como esta: Conozco las posiciones exactas de las esquinas de esa forma, y ​​me gustaría colocar otra imagen dentro de ella. (Por lo que parece estar dentro de la caja). Soy consciente del método drawImage para el canvas HTML5, pero parece que […]

Cómo implementar SVG’s preserveAspectRatio = “xMinYMin slice” para el método de canvas drawImage.

¿Existe alguna solución para implementar el preservAspectRatio = “xMinYMin slice” de SVG para el método drawImage () en el canvas?

Estoy tratando de editar el texto en el canvas

Quiero editar el texto en el canvas mostrando cualquier cuadro de entrada o área de texto en él. Lo he intentado y lo que estoy obteniendo es cuando escribimos cualquier texto en el cuadro de entrada y después de hacer clic en el canvas, el texto de la entrada se muestra. Pero no quiero así. […]

Guardar el canvas en la imagen a través de canvas.toDataURL da como resultado un rectángulo negro

Estoy usando Pixi.js y tratando de guardar un cuadro de la animación en una imagen. canvas.toDataUrl debería funcionar, pero todo lo que obtengo es un rectángulo negro. Ver ejemplo en vivo aquí El código que utilizo para extraer los datos de la imagen y configurar la imagen es: var canvas = $(‘canvas’)[0]; var context = […]

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