javascript - 我想用canvas画圆周运动的点动画，但是js代码没有反映，请问问题在哪？
本文介绍了javascript - 我想用canvas画圆周运动的点动画，但是js代码没有反映，请问问题在哪？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我想能让一个点按照圆周运动，可是写了没有反应，想了很久不知道问题在哪。
代码如下
<!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>求指教！
解决方案
-
setInterval不能这样传参的。
setInterval(function() { draw_cirlcle(ctx, vX, radius) }, 40); 或者 setInterval(draw_cirlcle, 40, ctx, vX, radius); 这里不需要传参，否则每次调用
draw_cirlcle方法时vX值不是固定了嘛。画圆周运动应该根据角度/弧度变化啊
这篇关于javascript - 我想用canvas画圆周运动的点动画，但是js代码没有反映，请问问题在哪？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
