Canvas repeat rect

Question

Я пытаюсь сделать шаблон для своего фона, но я хочу нарисовать прямоугольник самостоятельно, а не использовать изображение.

КОД:

<canvas id="myCanvas" width="33" height="33"></canvas> 
<script> 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 

    context.beginPath(); 
    context.rect(0, 0, 32, 32); 
    context.fillStyle = 'black'; 
    context.fill(); 
    context.lineWidth = 1; 
    context.strokeStyle = 'silver'; 
    context.stroke(); 
</script> 

До сих пор он создает прямоугольник, который я хочу. Теперь я хочу повторить его в X и Y.

Кроме того, это жизнеспособный способ сделать это, если я хочу добавить анимацию mouseOnHover для каждого квадрата (той же анимации) позже?

Answer 1

Это, как вы можете создать сетку мыши поверх состоянии прямоугольников:

var ctx = canvas.getContext("2d"), 
 
    cw = 32, 
 
    ch = 32, 
 
    w = canvas.width, 
 
    h = canvas.height; 
 

 
ctx.translate(0.5, 0.5); 
 
ctx.beginPath(); // not neede here, but if in a larger project 
 

 
for(var y = 0; y < h; y += ch) { 
 
for(var x = 0; x < w; x += cw) { 
 
     ctx.rect(x, y, cw-2, ch-2); // give 1px space 
 
    } 
 
} 
 

 
ctx.fillStyle = "gray"; 
 
ctx.strokeStyle = "#000"; 
 

 
ctx.lineWidth=1; 
 
ctx.fill(); 
 
ctx.stroke(); 
 

 
canvas.onmousemove = function(e) { 
 

 
    var rect = this.getBoundingClientRect(), 
 
     x = e.clientX - rect.left, 
 
     y = e.clientY - rect.top, 
 
     cx = ((x/cw)|0) * cw, //quantize mouse pos to grid 
 
     cy = ((y/ch)|0) * ch; 
 
    
 
    ctx.fillStyle = "red"; 
 
    ctx.fillRect(cx+1, cy+1, cw-3, ch-3); 
 
};

<canvas id=canvas width=320 height=320></canvas>

Вы должны быть в состоянии принять принципы, предъявляемые к вашей потребности. Надеюсь это поможет!