Question

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

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

有人能建议一个很好的方法来生成网格并为方块分配随机颜色吗？如果您可以建议如何创建缩放效果，那将是SUPER：）

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

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

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

1 个答案: