Canvas 中的动画不起作用答案

【问题标题】：Animations within Canvas are not workingCanvas 中的动画不起作用
【发布时间】：2016-08-19 06:39:14
【问题描述】：

我的动画有一个奇怪的问题。无论如何，我什么都不能动。我什至编写了一个简单的代码来查看问题所在，但我得到的只是一个什么都不做的静态方块。我尝试过使用 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);

任何想法为什么事情没有移动？？

【问题讨论】：

您不要在字符函数中使用x 和y 值。所以它总是在固定值上绘制它。 ctx.rect(x, y, 50, 50);将用不断变化的值绘制它...

标签： javascript html animation canvas

【解决方案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; }

&lt;canvas id="myCanvas" width=200 height=200&gt;&lt;/canvas&gt;

【讨论】：