清除矩形不起作用答案

【问题标题】：clearRect not working清除矩形不起作用
【发布时间】：2012-04-02 08:04:06
【问题描述】：

为了学习制作游戏，我正在用 javascript 做一个 Pong 游戏，我想让它面向对象。

我无法让clearRect 工作。它所做的只是画一条越来越长的线。以下是相关代码：

function Ball(){
    this.radius = 5;
    this.Y = 20;
    this.X = 25;
    this.draw = function() {
        ctx.arc(this.X, this.Y, this.radius, 0, Math.PI*2, true);
        ctx.fillStyle = '#00ff00';
        ctx.fill();
    };
}

var ball = new Ball();

function draw(){
    player.draw();
    ball.draw();
}

function update(){
    ctx.clearRect(0, 0, 800, 400);
    draw();
    ball.X++;
}

我尝试将ctx.clearRect 部分放在draw() 和ball.draw() 函数中，但它不起作用。我也用白色尝试了fillRect，但它给出了相同的结果。我该如何解决这个问题？

【问题讨论】：

你能在 jsFiddle 上设置这个来帮助解释画一条越来越长的线吗？
我之前尝试过，但无法让它在那里工作，我再试一次。
我不知道如何使用 JSFiddle，javascript 部分没有包含任何内容。我把代码保存在那里，也许你可以让它工作：jsfiddle.net/hustlerinc/25qWe

标签： javascript html oop canvas

【解决方案1】：

你的真正问题是你没有关闭你的圈子的路径。

在画圆之前添加ctx.beginPath()。

jsFiddle.

还有一些小贴士……

您的资产不应该负责绘制自己（他们的draw() 方法）。相反，也许可以定义它们的视觉属性（它是一个圆吗？半径？）并让您的主渲染函数处理canvas 特定的绘图（这也有一个优势，您可以将您的渲染器切换到常规的 DOM 元素或 WebGL 更进一步轻松）。
请使用requestAnimationFrame()，而不是setInterval()。目前支持不是很好，因此您可能希望使用 setInterval() 或递归 setTimeout() 模式填充其功能。
您的clearRect() 应该传递来自canvas 元素的尺寸（或在某处定义它们）。将它们包含在您的渲染函数中类似于幻数，并且可能会导致进一步的维护问题。

【讨论】：

哇，这出乎意料的简单。这段代码究竟做了什么？
“viewport.width = viewport.width”部分我的意思是 clearRect 解释了自己，我不明白另一个人做了什么来清除画布。并感谢您的提示。 =)
@hustlerinc 这有点骇人听闻。基本上，它依赖于 canvas 渲染器在其尺寸发生变化时清除其内容。
好的，我明白了，现在我添加了 beginPath clearRect 再次工作，我实际上同时拥有 beginPath 和 closePath 但删除它们以查看它是否破坏了任何东西（在圆圈移动之前），因为没有任何改变我离开了就是这样：P。你知道什么最适合性能吗？ clearRect、fillRect 用颜色还是 hack？
@hustlerinc IIRC，破解速度较慢。这也是一个 hack，所以我会坚持使用clearRect()。您也可以像 John Carmack 一样使用 adaptive tile refresh，但对于当今的计算机来说这不是必需的（除了笑话，跟踪所有对象 的位置 并仅呈现差异会很有趣） .