Tag: canvas

Ajustar la imagen de fondo al tamaño del canvas con Fabric js

Estoy tratando de estirar la imagen de fondo para que se ajuste al tamaño del canvas. Pero no está funcionando. He seguido esta pregunta y en base al comentario he implementado el código de estiramiento. Estira la imagen de fondo al tamaño del canvas con Fabric.js http://fabricjs.com/docs/fabric.Canvas.html#setBackgroundImage Código $(function () { var canvas1 = new […]

Compruebe si las imágenes están cargadas antes de gameloop

Hasta ahora mi progtwig está funcionando como yo quiero. Esto funciona bien: // Player object var player = { x: 10, y: 10, draw: function () { ctx.drawImage(playerImg, 0, 0); … ¿Debo verificar si playerImg está cargado primero, aunque funcione correctamente hasta ahora? Además, cuál es la mejor manera de comprobarlo. Estaba pensando en poner […]

HTML5 Canvas Translate (0.5,0.5) no corrige la línea borrosa

Leyendo artículos relacionados , he intentado forzar el tamaño del canvas en píxeles, especificando medio píxeles para las rutas y también context.translate (0.5) pero las líneas de mi canvas todavía están borrosas. Ver Codepen. const ctx = canvas.getContext(“2d”); ctx.translate(0.5, 0.5); /* Function to draw HTML5 canvas line */ const drawPath = (startX, startY, endX, endY) […]

Dibuje un borde alrededor de la parte no transparente de la imagen en el canvas

Estoy dibujando una imagen en un canvas usando drawImage . Es un PNG que está rodeado de píxeles transparentes, como este: ¿Cómo puedo agregar un borde de color sólido a la parte visible de esa imagen en el canvas? Para aclarar: no quiero un rectángulo que rodee el cuadro delimitador de la imagen. El borde […]

La modificación de un canvas mediante la manipulación de píxeles de alguna manera no funciona del todo en IE9

En un primer bash de realizar una manipulación de píxeles en un canvas de HTML5, he escrito un código para cambiar una parte específica de una image de background. Estoy usando una image de máscara para marcar las partes específicas que deben cambiarse. Y dibujo dos líneas verticales de 1 píxel a la vez. Mi […]

Sobre la marcha image del cliente al convertidor webp … pero los png no son transparentes

este es un código de trabajo para convertir jpg o png a webp El nuevo formatting de image de Google es en promedio 30-40% más pequeño que el de jpg o png 1. Abrir con Chrome 2. Establecer la calidad 3. Despliegue una image dentro de la página 4.Espere (depende del tamaño … pruebe primero […]

EaselJS, Canvas, image de bitmap de baja calidad y punto de logging no funciona

Empecé a usar EaselJS para un proyecto en el que estoy trabajando y estoy un poco atrapado con la class Bitmap. Lo que hago es agregar una image de 3000 x 4000 al canvas / escenario y dejar que el usuario lo escale y lo gire. Principalmente estoy usando la siguiente function: @width = 3000 […]

Canvas o SVG para el proyecto de diseñador de sala

Estoy a punto de comenzar a trabajar en un proyecto de diseñador de habitaciones que te permitirá drag and drop panetworkinges / puertas / muebles, etc. en una grilla para diseñar una habitación. He decidido que drag and drop PNG transparentes y posicionarlos absolutamente no va a funcionar y no quiero usar flash, por lo […]

El object no admite esta propiedad o método IE8

Estoy usando este código de grises de HTML5: http://webdesignerwall.com/demo/html5-grayscale/. Sin embargo, en el javascript, IE8 devuelve el error "El object no admite esta propiedad o método". ¿Alguien sabe qué está mal con el JavaScript? Estoy bastante seguro de que esta línea está causando el error " var ctx = canvas.getContext('2d'); " Gracias. // $(".item img").css({"display":"none"); […]

canvas html5: ¿el ancho / alto debe definirse en línea?

He estado jugando con HTML5 / Javascript y encontré algo que no entiendo. Intenté escribir algunas rutinas básicas para trabajar con el canvas de HTML5 y descubrí que la function drawImage no dibujaba nada. Al imaginar que era mi código, utilicé el código de un tutorial existente, concretamente HTML5 Canvas Image Tutorial . Cuando incluí […]

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