如何创建对象的 nxm HTML5 画布网格（彩色方块）？

Question

我正在尝试在给定区域<canvas> 中创建一个包含 n 列和 m 行的正方形网格（矩阵），如果需要，还可以选择设置正方形之间的间距。网格应该用随机颜色填充正方形。

我还想添加一个缩放功能，这样彩色方块在双击的区域会显得更大。

谁能提出一个生成网格并为正方形分配随机颜色的好方法？如果您也可以建议如何创建缩放效果，那将是 SUPER :)

我是画布新手，所以任何方法帮助都会很棒！ 谢谢

Answer 1

从您@Spencer Wieczorek 的 cmets 看来，填充单元格的绘图已经完成。

问题的另一部分的关键是使用转换：

• 确定要缩放的点（双击）：var scalePtX,scalePtY。

• 保存未转换的上下文状态：ctx.save();

• 按 (1-zoom)*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();
}