Html HTML5、JavaScript 和在画布中绘制多个矩形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15220003/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5, JavaScript and drawing multiple rectangles in a canvas
提问by Hello-World
Why won't my multiple rectangles draw in the canvas?
为什么我的多个矩形不会在画布中绘制？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid red">
<p>Your browser doesn't support canvas.</p>
</canvas>
</body>
</html>
<script type ="text/javascript">
function Shape(x, y, w, h, fill) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.fill = fill;
}
// get canvas element.
var elem = document.getElementById('myCanvas');
// check if context exist
if (elem.getContext) {
var myRect = [];
myRect.push(new Shape(10, 0, 25, 25, "#333"))
myRect.push(new Shape(0, 40, 39, 25, "#333"))
myRect.push(new Shape(0, 80, 100, 25, "#333"))
context = elem.getContext('2d');
for (i in myRect) {
//console.log(x);
context.fillRect(i.x, i.y, i.w, i.h)
}
//// x, y, width, height
//context.fillRect(0, 0, 50, 50);
//// x, y, width, height
//context.fillRect(75, 0, 50, 50);
}
</script>
Thanks for help.
感谢帮助。
回答by Raad
Ok, so you were almost there.
When you iterate round your array of rectangles, you are iterating over the array keynot the objects themselves (see How to Loop through plain JavaScript object with objects as members?).
Plus, as @jimjimmy1995 pointed out, you need to set the fill using .fillStyleas .fillRectdoes not have a fill parameter.
好的，所以你快到了。当您遍历矩形数组时，您是在遍历数组键而不是对象本身（请参阅如何使用对象作为成员循环遍历纯 JavaScript 对象？）。另外，正如@jimjimmy1995 指出的，您需要使用.fillStyleas设置填充。fillRect没有填充参数。
This code will work:
此代码将起作用：
function Shape(x, y, w, h, fill) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.fill = fill;
}
// get canvas element.
var elem = document.getElementById('myCanvas');
// check if context exist
if (elem.getContext) {
var myRect = [];
myRect.push(new Shape(10, 0, 25, 25, "#333"));
myRect.push(new Shape(0, 40, 39, 25, "#333"));
myRect.push(new Shape(0, 80, 100, 25, "#333"));
context = elem.getContext('2d');
for (var i in myRect) {
oRec = myRect[i];
context.fillStyle = oRec.fill;
context.fillRect(oRec.x, oRec.y, oRec.w, oRec.h);
}
}
回答by James Coyle
Don't you need to give it the fill color?
你不需要给它填充颜色吗？
context.fillStyle = i.fill;
context.fillRect(i.x,i.y,i.w,i.h);
