我试图在 Canvas 上创建一个移动对象，但每次设置的间隔结束时，它都会给我错误:“更新未定义”，即使更新的定义就在初始化之前。如何设置正确调用更新的间隔？
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="An HTML5 Test">
<meta name="author" content="William Starkovich">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var angle = 0.0;
var increment = 0.1;
function incrementAngle(angle, increment){
angle += increment;
if(angle > Math.PI * 2)
angle -= (Math.PI * 2);
}
function update(angle, increment){
incrementAngle(angle, increment);
//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");
//draw a circle
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.arc(20, 20, 15, angle, angle + Math.PI, true);
ctx.lineWidth = 5;
ctx.stroke();
ctx.closePath();
}
function init(angle, increment){
update(angle, increment)
setInterval("update(angle, increment)",1000);
}
init(angle, increment);
});
</script>
</head>
<body>
<canvas id="canvas" width="800px" height="100px">
<p>Your browser doesn't support canvas.</p>
</canvas>
</body>
</html>
最佳答案
您似乎正在寻求使用全局变量，那么为什么不一路走下去呢？
http://jsfiddle.net/mblase75/8L62c/3/
var angle = 0.0;
var increment = 0.1;
function incrementAngle() {
angle += increment;
if (angle > Math.PI * 2) angle -= (Math.PI * 2);
}
function update() {
incrementAngle();
//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");
//draw a circle
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.arc(20, 20, 15, angle, angle + Math.PI, true);
ctx.lineWidth = 5;
ctx.stroke();
ctx.closePath();
}
function init() {
update();
setInterval(update, 1000);
}
$(document).ready(function() {
init();
});
关于javascript - 更新未定义？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7878266/