来源：未知 时间：2021-05-04 20:19 作者：小飞侠 阅读:次
[导读] 之前讲过canvas绘制标准圆形动画，今天带来canvas绘制椭圆动画。 预览图： 效果预览： 绘制椭圆动画稍微麻烦点，涉及到数据公式。 长轴长我们用2a表示，短轴长我们用2b表示 假设椭圆...
|
之前讲过canvas绘制标准圆形动画，今天带来canvas绘制椭圆动画。 预览图：
效果预览：https://www.zixuephp.com/static/res/canvas/test/canvas-tround2.html 绘制椭圆动画稍微麻烦点，涉及到数据公式。
长轴长我们用2a表示，短轴长我们用2b表示 假设椭圆的长轴与X轴平行，那么表达式如下所示：
是不是看得很懵逼，如果是那是你数学没学好... 不过没关系，我们只需要记住JS最终推导公式：假设求P点坐标，那么JS代码如下：t可以理解为单位时间角度，这个可以根据自己需求和360°换算即可。 x=a*cos(t) y=b*sin(t) 带入公式看代码： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas实现椭圆运动</title>
</head>
<body>
<canvas id="canvas">你的浏览器不支持canvas，请跟换其他浏览器试一试</canvas>
<script>
var a=200,
b=150,
radius=30;
time=0;//循环的次数
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.height=768;
canvas.width=1024;
var cxt=canvas.getContext('2d');
centerPoint(cxt);
arcRoute(cxt,500,300,a,b,radius);
setInterval(function(){
arcRoute(cxt,500,300,a,b,radius);
},1000 / 60);
};
//绘制原点
function centerPoint(cxt){
cxt.fillStyle="red";
cxt.beginPath();
cxt.arc(400,400,50,0,2*Math.PI,true)
cxt.closePath();
cxt.fill();
}
//椭圆路线绘制
function route(context,x,y,a,b){
var step = (a > b) ? 1 / a : 1 / b;
context.beginPath();
context.moveTo(x + a, y); //从椭圆的左端点开始绘制
for (var i = 0; i < 2 * Math.PI; i += step)
{
context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
}
context.closePath();
context.stroke();
}
//椭圆上小球运动的实现
function arcRoute(context,x,y,a,b,r){
context.clearRect(0,0,1024,768);
route(context,x,y,a,b);
// centerPoint(context);
var step = (a > b) ? 1 / a : 1 / b;
context.fillStyle="red";
if(time==0){
context.beginPath();
context.arc(x,y,r,0,2*Math.PI,true);
context.closePath();
context.fill();
}else{
context.beginPath();
context.arc(x+a*Math.cos(time),y+b*Math.sin(time),r,0,2*Math.PI,true);
context.closePath();
context.fill();
}
time+=0.01;
}
</script>
</body>
</html> |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
