用javascript绘制矩形
为什么我看不到矩形（圆圈显示了..）？ 我试着画一个像破砖头一样的游戏 这是我的代码：用javascript绘制矩形,javascript,draw,Javascript,Draw,为什么我看不到矩形（圆圈显示了..）？ 我试着画一个像破砖头一样的游戏 这是我的代码： <!DOCTYPE html> <html> <head> <script type="text/javascript"> var context; var dx = 4; var dy = 4; var y = 150; var x = 10; var w = 600; var h = 400;
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var context;
var dx = 4;
var dy = 4;
var y = 150;
var x = 10;
var w = 600;
var h = 400;
var TopPadding = 10;
var BrickHeight = 20;
var BrickPadding = 2;
var BrickWidth = 50;
function getBrickTop(row) {
return TopPadding + (row * (BrickHeight + BrickPadding));
}
function getBrickBottom(row) {
return TopPadding + (row * (BrickHeight + BrickPadding)) + BrickHeight;
}
function getBrickLeft(col) {
return col * (BrickWidth + BrickPadding);
}
function getBrickRight(col) {
return (col * (BrickWidth + BrickPadding)) + BrickWidth;
}
function draeRect(){
context = myCanvas.getContext('2d');
context.fillStyle="#FF0560";
for (var row = 0; row < 10; row++) {
for (var i = 0; i < 18; i++) {
context.rect(getBrickLeft(i),
getBrickTop(row),
BrickWidth,
BrickHeight);
}
}
ctx.stroke();
}
/* function draw() {
context = myCanvas.getContext('2d');
context.clearRect(0, 0, w, h);
context.beginPath();
context.fillStyle = "#0000ff";
context.arc(x, y, 20, 0, Math.PI * 2, true);
context.closePath();
context.fill();
if (x < 0 || x > w)
dx = -dx;
if (y < 0 || y > h)
dy = -dy;
x += dx;
y += dy;
}
setInterval(draw, 10); */
setInterval(drawRect, 10);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
#container { width:600px; margin:0 auto; }
#myCanvas { background:#fff; border:1px solid #cbcbcb; }
#nav { display:block; width:100%; text-align:center; }
#nav li { display:block; font-weight:bold; line-height:21px; text-shadow:1px 1px 1px #fff; width:100px;
height:21px; padding:5px; margin:0 10px; background:#e0e0e0; border:1px solid #ccc; -moz-border-radius:4px;
-webkit-border-radius:4px; border-radius:4px; float:left; }
#nav li a { color:#000; display:block; text-decoration:none; width:100%; height:100%; }
-->
</style>
</head>
<body>
<div id="container">
<canvas id="myCanvas" width=600 height=400></canvas>
</div>
</body>
</html>
var语境；
var-dx=4；
var-dy=4；
变量y=150；
var x=10；
var w=600；
var h=400；
var=10；
var BrickHeight=20；
var=2；
var BrickWidth=50；
函数getBrickTop（行）{
返回TopPadding+（行*（BrickHeight+BrickPadding））；
}
函数getBrickBottom（行）{
返回TopPadding+（行*（BrickHeight+BrickPadding））+BrickHeight；
}
函数getBrickLeft（col）{
返回列*（BrickWidth+BrickPadding）；
}
函数getBrickRight（col）{
返回（col*（BrickWidth+BrickPadding））+BrickWidth；
}
函数{
context=myCanvas.getContext（'2d'）；
context.fillStyle=“#FF0560”；
对于（变量行=0；行<10；行++）{
对于（变量i=0；i<18；i++）{
context.rect（getBrickLeft（i），
getBrickTop（世界其他地区），
布里克维兹，
砖块）；
}
}
ctx.stroke（）；
}
/*函数绘图（）{
context=myCanvas.getContext（'2d'）；
clearRect（0，0，w，h）；
context.beginPath（）；
context.fillStyle=“#0000ff”；
弧（x，y，20，0，Math.PI*2，true）；
closePath（）；
context.fill（）；
如果（x<0 | | x>w）
dx=-dx；
if（y<0 | | y>h）
dy=-dy；
x+=dx；
y+=dy；
}
设置间隔（抽签，10）*/
设置间隔（drawRect，10）；
#容器{宽度：600px；边距：0自动；}
#myCanvas{background:#fff；border:1px solid#cbcbcb；}
#导航{显示：块；宽度：100%；文本对齐：中心；}
#nav li{显示：块；字体重量：粗体；行高：21px；文本阴影：1px 1px 1px#fff；宽度：100px；
高度：21px；填充：5px；边距：0 10px；背景：#e0e0；边框：1px实心#ccc；-moz边框半径：4px；
-webkit边框半径：4px；边框半径：4px；浮动：左；}
#nav li a{color:#000；显示：块；文本装饰：无；宽度：100%；高度：100%；}
-->
此外，检查控制台会发现所有这些错误，要在大多数浏览器中打开控制台，请按F12键并选择console选项卡。如果您打算使用以下代码在画布中绘制矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Red rectangle
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();
Siva如果您不愿意进行大量图形编程，这里有另一个解决方案：
<div class="rectangle" width="500px" height="250px" style="background-color:red;"></div>
只需将、
500px250pxred