画布内的动画不起作用

我的动画有一个奇怪的问题。无论如何，我无法获得任何动作。我甚至做了一个简单的代码来看看问题是什么，但我所得到的只是一个静态的广场，它什么都不做。我尝试过使用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);

任何想法，为什么事情不动？

来源

2016-04-25 RazerB12

你不使用'x'和'y'值在字符函数。所以它总是以固定值来绘制它。 'ctx.rect（x，y，50，50）;'将用变化的值绘制它... – michaPau

您总是在固定的位置绘制您的矩形[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>

来源

2016-04-25 18:12:08 markE

画布内的动画不起作用

回答

相关问题