如何创建nxm HTML5画布对象网格(彩色正方形)

Question

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

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

有人能提出一个好的方法来生成网格并为正方形分配随机颜色吗？如果你也能建议如何创建缩放效果，那将是SUPER:）

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

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();
}