我想能让一个点按照圆周运动，可是写了没有反应，想了很久不知道问题在哪。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Title</title>
<style>
body{
max-width:600px;
height: 500px;
margin:0 auto;
text-align: center;
}
.canvas{
width: 200px;
height:200px;
border:solid cornflowerblue;
}
</style>
</head>
<body>
<canvas class="canvas" id="canvas1" ></canvas>
</body>
<script type="text/javascript">
var canvas=document.getElementById("canvas1");
var ctx=canvas.getContext("2d");
ctx.translate(100,100);
ctx.fillStyle="red";
var radius=10;
var vX=-10;
function draw_cirlcle(ctx,vX,radius) {
if(vX>10){
vX=-10;
}
var vY=parseInt(Math.sqrt(radius*radius-vX*vX));
ctx.clearRect(0,0,200,200);
ctx.fillRect(vX,vY,2,2);
vX++;
}
setInterval(draw_cirlcle.call(window,ctx,vX,radius),40);
</script>
</html>求指教！
引自http://128kj.iteye.com/blog/1982225
自动运动圆周
<!DOCTYPE html>
<html>
<head>
<title>Making things move</title>
<meta charset="gbk">
<script type="text/javascript">
var canvas,context;
var canvasWidth,canvasHeight;
var playAnimation = true;
var startButton,stopButton;
var shapes = new Array();
function init() {
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
canvasWidth = canvas.width;
canvasHeight = canvas.height;
startButton = document.getElementById("startAnimation");
stopButton = document.getElementById("stopAnimation");
shapes.push(new Shape(300, 300, 100,10));
animate();
}
var Shape = function(x, y,radius,angle) {
this.x = x;
this.y = y;
this.radius=radius;
this.angle = angle;
};
function animate() {
context.clearRect(0, 0, canvasWidth, canvasHeight);
var shapesLength = shapes.length;
for (var i = 0; i < shapesLength; i++) {
var tmpShape = shapes[i];
var x = tmpShape.x+(tmpShape.radius*Math.cos(tmpShape.angle*(Math.PI/180)));
var y = tmpShape.y+(tmpShape.radius*Math.sin(tmpShape.angle*(Math.PI/180)));
if(i==0) tmpShape.angle += 5;
else tmpShape.angle += 10;
if (tmpShape.angle > 360) {
tmpShape.angle = 0;
};
context.fillRect(x, y, 10, 10);
}
if (playAnimation) {
setTimeout(animate, 33);
}
}
</script>
</head>
<body onload="init();">
<canvas id="myCanvas" width="800" height="450" style="background-color: transparent;position:absolute"></canvas>
<canvas id="myCanvas1" width="800" height="450"></canvas>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<title>A basic HTML5 blog homepage</title>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
canvas{
background: #ccc;
display: block;
/*margin:50px auto;*/
/*border: solid 1px #ccc;*/
}
*{
margin: 0;
padding: 0;
}
html,body{
height:100%;
width:100%;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var canvas = $('#canvas');
var context = canvas.get(0).getContext('2d');
var canvasWidth = canvas.width();
var canvasHeight = canvas.height();
var playAnimation = true;
var startButton=$('#startAnimation');
var stopButton=$('#stopAnimation');
startButton.hide();
startButton.click(function(){
$(this).hide();
stopButton.show();
playAnimation = true;
animate();
});
stopButton.click(function(){
$(this).hide();
startButton.show();
playAnimation = false;
});
var shape = function(x,y,width,height){
this.x = x;
this.y = y;
this.width = width;
this.height = height;
/*this.radius = Math.random()*30;*/
// this.radius = 30;
// this.angle = 0;
this.left = false;
this.top = false;
}
var shapes = new Array();
// shapes.push(new shape(50,50));
// shapes.push(new shape(100,100));
// shapes.push(new shape(150,150));
for(var i = 0;i< 10;i++){
var x = Math.random()*250;
var y = Math.random()*250;
var width = height = Math.random()*30;
shapes.push(new shape(x,y,width,height));
}
function animate(){
context.clearRect(0,0,canvasWidth,canvasHeight);
for(var i=0;i<shapes.length;i++){
// shapes[i].x+=Math.random()*4-2;
// shapes[i].y+=Math.random()*4-2;
var temp = shapes[i];
// var x = temp.x + (temp.radius * Math.cos(temp.angle));
// var y = temp.x + (temp.radius * Math.sin(temp.angle));
// temp.angle +=30;
// if(temp.angle > 360){
// temp.angle = 0;
// }
context.fillRect(temp.x,temp.y,temp.width,temp.height);
if(temp.x < 0){
temp.left = false;
}else if(temp.x + temp.width > canvasWidth){
temp.left = true;
}
if(temp.y < 0){
temp.top = false;
}else if(temp.y + temp.height > canvasHeight){
temp.top = true;
}
if(!temp.left){
temp.x += 2;
}else{
temp.x -= 2;
};
if(!temp.top){
temp.y += 2;
}else{
temp.y -= 2;
};
}
if(playAnimation){
setTimeout(animate,33);
}
}
animate();
});
</script>
</head>
<body>
<canvas width="500" height="500" id="canvas"></canvas>
<button id="startAnimation">Start</button>
<button id="stopAnimation">Stop</button>
</body>
</html>可以参照下正方形沿着圆周运动
-
setInterval不能这样传参的。
setInterval(function() { draw_cirlcle(ctx, vX, radius) }, 40); 或者 setInterval(draw_cirlcle, 40, ctx, vX, radius); 这里不需要传参，否则每次调用
draw_cirlcle方法时vX值不是固定了嘛。画圆周运动应该根据角度/弧度变化啊