我想能让一个点按照圆周运动,可是写了没有反应,想了很久不知道问题在哪。
代码如下
<!DOCTYPE html>
<html>
<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>
相关分类