Question

我是一名非常初学的网页设计师，我对此代码有两个问题。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#canvas1{border: #666 3px solid;}
</style>
<script type="application/javascript" language="javascript">
function draw (x,y){
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
ctx.save();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillstyle = "rgb (0,200, 0)";
ctx.fillRect(x, 20, 50, 50);
ctx.restore();
x += 5;
var loop = setTimeout('draw('+x+', '+y+')', 100); 
}
</script>
</head>
<body>
<button onclick="draw(0,0)">Start</button>
<canvas id="canvas1" width="400" height="400"</canvas>
</body>
</html>

为什么块总是变成黑色？为什么如果我再次按下启动，clearRect功能不起作用？

Answer 1

因为您需要使用：

ctx.fillStyle = "rgb(0,200,0)";

首字母'S'，'rgb'和左括号之间没有空格：http://jsfiddle.net/dtHjf/

然后，就多次按下“开始”导致方块闪烁的原因而言，这是因为每次按下它都会启动另一个动画循环，但不取消旧的循环，这样你就有多个循环战斗。如果您确定在开始新循环之前取消任何预先存在的循环，那么您应该没问题：

http://jsfiddle.net/dtHjf/2/

<强> HTML ：

<button id="startAnim">Start</button><br />
<canvas id="canvas1" width="400" height="400"></canvas>

<强> JS ：

var canvas = document.getElementById('canvas1'),
    ctx = canvas.getContext('2d'),
    loop;

function draw(x, y) {

    ctx.save();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "rgb(0,200,0)";
    ctx.fillRect(x, 20, 50, 50);
    ctx.restore();

    x += 5;
    loop = setTimeout(function(){draw(x,y)}, 100);
}

document.getElementById('startAnim').onclick = function(){
    clearTimeout(loop);
    draw(0,0);
};

此外，这与您的问题无关，但您可能需要查看requestAnimationFrame：

https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

Answer 2

当你点击开始时，你开始一个新的循环，它与已经开始的循环并行运行，并且根据首先执行的循环，你的画布将被清除并填充两次（或者你开始循环的次数 - 越多越多宣称闪烁将是。）

您需要一种机制来阻止循环多次启动。一种方法是使用标志。我还建议你重新分解循环和绘图的代码：

<强> Live demo here

/// put these outside, no need to re-allocate them each time
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
var x = 0;
var isRunning = false;

/// all loop-related here:
function loop() {

    /// call draw from inside the loop instead
    draw(x, 0); /// you are never using y so I just set 0 here...

    x += 5;

    if (isRunning && x <= w) {
        requestAnimationFrame(loop);  /// this is a better alternative
        //setTimeout(loop, 100);      /// optionally, but not recommended
    } else {
        isRunning = false;  /// box is outside visible area so we'll stop..
    }
}

/// keep draw() "clean", no loop code in here:
function draw(x, y) {
    /// no need for save/restore here...
    ctx.clearRect(0, 0, w, h);
    ctx.fillStyle = "rgb(0, 200, 0)";
    ctx.fillRect(x, 20, 50, 50);
}

您的fillStyle输入错误，您的rgb(...必须没有空格（如另一个答案中所述 - 但在这种情况下只会导致填充样式为黑色），此外您在html中错过了canvas标记的结束括号。

要检查按钮点击，这是一种更推荐的方式，而不是在html中内联JS：

/// check for button clicks (start):
document.getElementById('start').addEventListener('click', function() {

    if (!isRunning) {     /// are we running? if not start loop
        isRunning = true; /// set flag so we can prevent multiple clicks
        x = 0;            /// reset x
        loop();           /// now we start the *loop*
    }

}, false);

在你的HTML中：

<button id="start">Start</button>

现在您可以轻松制作暂停按钮：

<button id="stop">Stop</button>

并将其添加到脚本中：

document.getElementById('stop').addEventListener('click', function() {

    isRunning = false;

}, false);

clearRect不工作？

2 个答案: