如何创建nxm HTML5画布网格的对象(彩色方块)？
如何创建nxm HTML5画布网格的对象(彩色方块)？
提问于 2014-09-07 21:42:50
我试图在给定的区域<canvas>中创建一个包含n列和m行的正方形网格(矩阵)，如果需要的话，还可以选择在这些方块之间设置一个间距。网格应该用随机着色填充方格。
我还想添加一个缩放功能，这样，在双击区域中，彩色方块就会显得大得多。
有人能提出一个很好的方法来生成网格并给方格分配随机颜色吗？如果您也可以建议如何创建缩放效果，那就太棒了:)
我对画布很陌生，所以任何方法的帮助都是很棒的！谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-09-08 02:17:15
看起来，从你@的评论中可以看出填充单元格的绘制。
您问题的另一部分的关键是使用转换：
- 确定要缩放的点(双击)：
var scalePtX,scalePtY。 - 保存未转换的上下文状态：
ctx.save(); - 按(1-缩放)*缩放点：
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();
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25715049
复制相关文章
相似问题
腾讯云开发者
