JavaScript循环在画布上创建网格
JavaScript Loop to create grid on canvas
我要做的是用32x32块随机颜色填充myCanvas。我使用循环来创建块并为它们分配颜色。我已经知道如何在循环进行时使直线在Y轴上下降,但我无法想象如何使X轴正确。
如果你把画布变大,你会看到20个block的线条在右边。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
for (i = 0; i < 400; i++) {
var X = i * 32;
var Y = Math.floor(i / 20) * 32;
ctx.fillStyle='#'+Math.floor(Math.random()*16777215).toString(16);
ctx.fillRect(X, Y, 32, 32);
console.log('X:' + X);
console.log('Y:' + Y);
}
我试过这样使用模数:
if(i % 20 == 0){
X = 0;
}
但它只修复它,当我得到20的倍数,所以只有左侧的画布将被填充的块。我的问题是,我的脑子里全是完成这项工作所涉及的数学问题。对不起,我很累,这是一个新的
小提琴:http://jsfiddle.net/orwfo7re/
你已经非常接近你的模数建议了!然而,您的if
语句只在 i % 20 == 0
时执行,例如i=21
解决方案是在你的算法中使用var x = (i % 20) * 32
作为变量x。所以:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
for (i = 0; i < 400; i++) {
var X = (i % 20) * 32;
var Y = Math.floor(i / 20) * 32;
ctx.fillStyle='#'+Math.floor(Math.random()*16777215).toString(16);
ctx.fillRect(X, Y, 32, 32);
}
小提琴:https://jsfiddle.net/MartyB/ur9vug0x/2/
你的意思是这样做吗?
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var width = 640;
var height = 640;
for (y=0; y< height; y=y+32) {
for (x=0; x < width; x=x+32) {
ctx.fillStyle='#'+Math.floor(Math.random()*16777215).toString(16);
ctx.fillRect(x, y, 32, 32);
}
}
相关文章:
- Kinetic.js–创建网格
- Three.js:我可以创建网格来替换很多对象吗
- 如何在Meteor.js中使用车把创建网格系统
- 角度.js ng 重复用于创建网格
- 使用 Knockoutjs 创建网格
- 使用 geometry.vertices 和 geometry.faces 从 .obj 文件创建网格
- 如何在 angularjs 中使用 ui-grid 为多个表动态创建网格选项
- 从 2 个特定元素创建网格
- jQuery UI,捕捉到网格示例,创建网格线
- 用JavaScript创建网格容器
- 如何在C#/Razar/KendoUI中使用嵌套的DropDownList创建网格
- 使用Handlebars.js创建网格的简单方法
- KineticJs:为拼图创建网格线
- 在Twitter引导程序中创建网格跨度之间的空间
- 为我的页面创建网格外观的最有效的方法
- JavaScript循环在画布上创建网格
- 如何在地图的查看区域中创建网格
- 用CSS在HTML中创建网格的最有效的方法
- 想要使用javascript和html在web应用程序中创建网格视图
- 有人能给我解释一下这个用JS/jQuery创建网格的功能吗