Question

为什么我看不到矩形（圆圈显示..）？我尝试画一个类似砖破坏者的游戏

这是我的代码：

<!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>

Answer 1

将函数名称从 draeRect（）更改为 drawRect（），然后在该函数中将 ctx.stroke（）更改为 context.stroke（）

此外，检查控制台是否会显示所有这些错误，要在大多数浏览器中打开控制台，请按F12键并选择控制台选项卡。

Answer 2

如果您打算使用以下代码在画布中绘制矩形

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();

小提琴：

http://jsfiddle.net/cDTk6/

谢谢，

希瓦

Answer 3

如果你不愿意做很多图形编程，这是另一个解决方案：

<div class="rectangle" width="500px" height="250px" style="background-color:red;"></div>

用您自己的值替换500px，250px和red ......

在javascript中绘制矩形

3 个答案: