我的动画有一个怪异的问题。无论如何，我什么也动不了。我什至编写了一个简单的代码来查看问题所在，但是我所得到的只是一个无能为力的静态正方形。我已经尝试过使用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);
有什么想法为什么事情不动吗？
最佳答案
您总是在固定位置[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>