javascript - 如何创建 nxm HTML5 canvas 对象网格(彩色方 block )？

Question

我正在尝试在给定区域中创建正方形网格(矩阵)<canvas>有 n 列和 m 行，如果需要，可以选择设置正方形之间的间距。网格应使用随机颜色填充方 block 。

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

谁能推荐一种生成网格并为方 block 分配随机颜色的好方法？如果您也可以建议如何创建缩放效果，那就太棒了:)

我是 Canvas 的新手，所以任何方法帮助都会很棒! 谢谢

Answer 1

从@Spencer Wieczorek 的评论看来，填充单元格绘制已经完成。

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

• 确定要缩放的起点(双击):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();
}