javascript - html canvas clearRect() 不起作用

Question

我正在研究 html canvas 并尝试制作简单的动画。我想让矩形向右移动。你可以在这里查看我的代码。 http://codepen.io/inkluter/pen/GgeQqj

var x = 0, y = 0, w = 200, h = 100;

    function draw() {
       c.clearRect(0, 0, c.width, c.height);

       x++;
       c.beginPath();
       c.strokeRect(x, y, w, h);
       c.closePath();

       requestAnimationFrame(draw); 
    };

问题是clearRect()函数似乎不起作用。旧矩形仍然显示在 Canvas 上。

我做错了什么？

Answer 1

“width”和“height”属性是在 canvas 元素中定义的，而不是在上下文中定义的。改为编写 c.clearRect(0, 0, canvas.width, canvas.height) 。