Tag: html5

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) { […]

Actualizar o cambiar o eliminar / restablecer el detector de eventos de Javascript

Ok, entonces estoy trabajando en una pequeña biblioteca de dibujo en canvas html5 y tengo un pequeño problema, aquí está el código (aquí abajo): var drawr = { init: function (canvas_id, canvasWidth, canvasHeight) { //height & width are optional this.canvas_id = document.getElementById(canvas_id); this.canvasWidth = canvasWidth; this.canvasHeight = canvasHeight; this.context = this.canvas_id.getContext(‘2d’); if (canvasWidth) { this.canvas_id.width […]

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 […]

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í. […]

Seleccione todos los elementos con el atributo “datos-” sin usar jQuery

Usando solo JavaScript, ¿cuál es la forma más eficiente de seleccionar todos los elementos DOM que tienen un determinado atributo de data- (digamos data-foo )? Los elementos pueden ser elementos de etiqueta diferentes.

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