Estoy tratando de construir una cuadrícula de píxeles súper simple (20x20) con un lienzo 2d. Y me gustaría ampliarlo (*10) usando diferentes tamaños para los atributos y el CSS.
Pensé que debería funcionar de esa manera, ya que los atributos de ancho y alto deberían representar los píxeles de la cuadrícula como se documenta. Pero cuando lo escalo usando CSS, los píxeles comienzan a suavizar (?) De alguna manera en lugar de permanecer píxeles simples (rectángulos). Establecer antialias en falso no tuvo ningún efecto.
¿Por qué es eso y hay una manera de resolverlo, sin aplicar la escala a todo lo demás excepto al CSS? (Podría hacer un píxel de 10 píxeles de ancho, pero eso arruina la simplicidad).
const element = document.createElement('canvas'); const canvas = element.getContext("2d", {antialias: false}); const size = 20; const scale = 10; element.width = size; element.height = size; element.style.width = size * scale + 'px'; element.style.height = size * scale + 'px'; [{x:10, y: 4}, {x:10, y: 6}, {x:10, y: 12}, {x:10, y: 13}] .forEach(({x, y}) => canvas.fillRect(x, y, 1, 1)); document.body.appendChild(element);Puede usar el CSS / Estilo de representación de imágenes y configurarlo como pixelado.
Más detalles -> https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
p.ej.
const element = document.createElement('canvas'); const canvas = element.getContext("2d"); element.style.imageRendering = 'pixelated'; const size = 20; const scale = 10; element.width = size; element.height = size; element.style.width = size * scale + 'px'; element.style.height = size * scale + 'px'; [{x:10, y: 4}, {x:10, y: 6}, {x:10, y: 12}, {x:10, y: 13}] .forEach(({x, y}) => canvas.fillRect(x, y, 1, 1)); document.body.appendChild(element);el atributo de ancho y alto del lienzo son sus verdaderas dimensiones en cierto sentido. Los píxeles del lienzo se colocan de acuerdo con esas dimensiones. style.width y style.height son las dimensiones utilizadas para mostrar el elemento del lienzo en la pantalla.
Entonces, el resultado final es un lienzo estirado por el navegador para cumplir con esos atributos de estilo. Esto estirará el lienzo de píxeles de 20x20 a un área de elemento de lienzo de 200x200.
En cambio
const element = document.createElement('canvas'); const canvas = element.getContext("2d", {antialias: false}); const size = 20; const scale = 10; element.width = size * scale;// scale the true dimensions of the canvas.(ie the canvas's coordinate system) element.height = size * scale; element.style.width = size * scale + 'px'; element.style.height = size * scale + 'px'; canvas.scale(scale,scale);//now when determining the coordinates, all the dimensions will be pre scaled and so each pixel that will be drawn will be calculated before being rendered instead of being stretched by the browser after [{x:10, y: 4}, {x:10, y: 6}, {x:10, y: 12}, {x:10, y: 13}] .forEach(({x, y}) => canvas.fillRect(x, y, 1, 1)); document.body.appendChild(element);Conclusión: la API de lienzo calcula las posiciones de cada píxel en función de los atributos de ancho y alto.
Luego, el navegador lo escala de acuerdo con las propiedades css style.width y style.height.
Al escalarlo en javascript. Las posiciones de los píxeles se calcularán antes de dibujar en pantalla.
Establezca los atributos de ancho y alto del lienzo en las dimensiones deseadas para que el navegador no lo amplíe después de dibujarlo.