如何創建對象的nxm HTML5 canvas網格（彩色正方形）？

Question

我正在嘗試在具有n列和m行的給定區域<canvas>創建正方形的網格（矩陣），並且如果需要的話，可以設置正方形之間的間距。 網格應使用隨機顏色填充正方形。

我還想添加一個縮放功能，因此在雙擊的區域中，彩色正方形會顯得更大。

誰能建議一種生成網格並將隨機顏色分配給正方形的好方法？ 如果您也可以建議如何創建縮放效果，那將是超級：)

我是畫布的新手，所以任何方法的幫助都將非常棒！ 謝謝

Answer 1

從您的@Spencer Wieczorek的評論看來，已經完成了填充單元的繪制。

問題另一部分的關鍵是使用轉換：

• 確定要縮放的點（雙擊）： var scalePtX,scalePtY 。

• 保存未轉換的上下文狀態： ctx.save();

• 轉換為（1-縮放）* scalePoint： ctx.translate((1-zoom)*scalePtX,(1-zoom)*scalePtY)

• 按縮放比例縮放： ctx.scale(zoom,zoom)

• 使用坐標繪制單元格，就好像它們是未變換的一樣： fillRect

• 將上下文恢復為其未轉換的狀態： ctx.restore()

這是重要的代碼和演示： http : //jsfiddle.net/m1erickson/e8bfg3h4/

function draw(){
    ctx.clearRect(0,0,cw,ch);
    ctx.save();
    ctx.translate((1-zoom)*scalePtX,(1-zoom)*scalePtY);
    ctx.scale(zoom,zoom);
    ctx.globalAlpha=0.25;
    for(var y=0;y<rows;y++){
    for(var x=0;x<cols;x++){
        ctx.fillStyle=colors[y*cols+x];
        ctx.fillRect(x*(w+padding),y*(h+padding),w,h);
    }}
    ctx.globalAlpha=1.00;
    ctx.beginPath();
    ctx.arc(scalePtX,scalePtY,10,0,Math.PI*2);
    ctx.closePath();
    ctx.stroke();
    ctx.restore();
}