无法在画布上绘制超过八个矩形
我正在尝试在画布上绘制简单的矩形。这是我的代码。 代码完全执行。但它只绘制了 7 个完整的矩形和第 8 个二分之一。 最后两个矩形未绘制。我做错了什么？我尝试了 IE9 beta、FF3 和 Chrome 9。请帮忙。
<html>
<head>
<script src="javascript/jquery-1.4.4.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
drawsegment($('#divTree'));
});
function drawsegment(widget) {
var $ctx = $('<canvas />', {
width: '300',
height: '200'
});
widget.html($ctx);
var ctx = $ctx[0].getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 255, 20);
ctx.fillStyle = "yellow";
ctx.fillRect(0, 20, 255, 20);
ctx.fillStyle = "blue";
ctx.fillRect(0, 40, 255, 20);
ctx.fillStyle = "green";
ctx.fillRect(0, 60, 255, 20);
ctx.fillStyle = "violet";
ctx.fillRect(0, 80, 255, 20);
ctx.fillStyle = "white";
ctx.fillRect(0, 100, 255, 20);
ctx.fillStyle = "black";
ctx.fillRect(0, 120, 255, 20);
ctx.fillStyle = "gray";
ctx.fillRect(0, 140, 255, 20);
ctx.fillStyle = "yellow";
ctx.fillRect(0, 160, 255, 20);
ctx.fillStyle = "blue";
ctx.fillRect(0, 180, 255, 20);
}
</script>
</head>
<body>
<div id="divTree"></div>
</body>
</html>
I am trying to draw simple rectangles on a canvas. Here is my code.
Code executes completely. But it draws only 7 rectangles completely and 8th one half.
Last two rectangles are not drawn. What am I doing wrong? I tried on IE9 beta, FF3 and Chrome 9. Please help.
<html>
<head>
<script src="javascript/jquery-1.4.4.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
drawsegment($('#divTree'));
});
function drawsegment(widget) {
var $ctx = $('<canvas />', {
width: '300',
height: '200'
});
widget.html($ctx);
var ctx = $ctx[0].getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 255, 20);
ctx.fillStyle = "yellow";
ctx.fillRect(0, 20, 255, 20);
ctx.fillStyle = "blue";
ctx.fillRect(0, 40, 255, 20);
ctx.fillStyle = "green";
ctx.fillRect(0, 60, 255, 20);
ctx.fillStyle = "violet";
ctx.fillRect(0, 80, 255, 20);
ctx.fillStyle = "white";
ctx.fillRect(0, 100, 255, 20);
ctx.fillStyle = "black";
ctx.fillRect(0, 120, 255, 20);
ctx.fillStyle = "gray";
ctx.fillRect(0, 140, 255, 20);
ctx.fillStyle = "yellow";
ctx.fillRect(0, 160, 255, 20);
ctx.fillStyle = "blue";
ctx.fillRect(0, 180, 255, 20);
}
</script>
</head>
<body>
<div id="divTree"></div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
画布宽度和高度应该是画布元素本身定义的属性，而不是样式属性：
Canvas width and height should be defined attributes of canvas element itself instead of styled attributes: