Necesito un rectángulo grande relleno con un patrón de tablero de ajedrez y debe poder escalar. Cuando dibujo cada cuadrado uno por uno, el resultado final es lo que quiero, pero es una forma realmente ineficiente de dibujar una vez que tengo miles de cuadrados para crear cada cuadro. Para contrarrestar esto, decidí crear un patrón de lienzo y llenar toda la región con un patrón simple.
Aquí hay un ejemplo de ambos métodos: https://jsfiddle.net/Stephen_Witwick/zpunh195/150/
El patrón de tablero de ajedrez negro de la izquierda es el que se crea con el lienzo de patrón y el tablero de ajedrez rojo se crea dibujando cada cuadrado individual.
Este es el código que funciona pero es lento:
//unitWidth and unitHeight are the dimensions of each square. Since the checkerboard uses squares, they are the same value //boxWidthUnits and boxHeightUnits are the dimensions of the checkerboard by number of squares for(let i = 0; i < boxWidthUnits/2; i++){ for(let j = 0; j < boxHeightUnits/2; j++){ ctx.fillRect(2*i*unitWidth,2*j*unitHeight,unitWidth,unitHeight); ctx.fillRect(2*(i+1/2)*unitWidth,2*(j+1/2)*unitHeight,unitWidth,unitHeight) } }¿Hay alguna manera de obtener el resultado del tablero de ajedrez rojo sin que sea tan lento?
El problema es que la mayoría de las veces el ancho/alto de la unidad es una fracción de un píxel, pero el tamaño del patrón debe ser un número redondo (porque es una imagen).
por ejemplo, cuando n=15, el tamaño de la unidad es 10,375, pero el tamaño de patternCanvas se redondea a 20x20. en este caso a cada patrón le faltan 0.75px * 10 patrones que caben en el cuadrado es un total de 7.5px.
es imperceptible a la vista, pero si guarda la imagen del lienzo y usa un editor de imágenes, puede ver que al patrón casi siempre le falta una parte a la derecha/abajo