Question

我的动画有一个奇怪的问题。无论如何，我都无法动弹。我甚至做了一个简单的代码来看看问题是什么，但我得到的只是一个静止的方块，什么都不做。我尝试过Chrome，IE和Edge，所有这些都给出了相同的结果。这是HTML：

<!DOCTYPE html>
<html>
    <head>
        <title> K: The Potassium Struggle </title>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="370"></canvas>
        <script type="text/javascript" src="JavaScripts/one.js"></script>
    </body>
</html>

以下是JavaScript：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width/2;
var y = canvas.height-30
var dx = 2;
var dy = -2;

function character () {
    ctx.beginPath();
    ctx.rect(20, 40, 50, 50);
    ctx.fillStyle = "#912CEE";
    ctx.fill();
    ctx.closePath();
}

function draw () {
    ctx.clearRect(0,0,canvas.width, canvas.height);
    character();
    x += dx;
    y += dy;
}

setInterval(draw, 10);

为什么事情不会移动？

Answer 1

你总是在一个固定的位置绘制你的矩形[20,40]而不是让[x，y]重新定位你的矩形。

这是重构的代码：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width/2;
var y = canvas.height-60
var dx = .1;
var dy = -.1;

function character () {
    ctx.beginPath();
    // ctx.rect(20, 40, 50, 50);
    ctx.rect(x,y, 50, 50);
    ctx.fillStyle = "#912CEE";
    ctx.fill();
    ctx.closePath();
}

function draw () {
    ctx.clearRect(0,0,canvas.width, canvas.height);
    character();
    x += dx;
    y += dy;
}

setInterval(draw, 10);

body{ background-color: ivory; }
canvas{border:1px solid red; margin:0 auto; }

<canvas id="myCanvas" width=200 height=200></canvas>

Canvas中的动画无效

1 个答案: