网站地图    收藏   

主页 > 采坑 > 前端采坑 > canvas采坑 >

canvas如何绘制椭圆动画

来源:未知    时间:2021-05-04 20:19 作者:小飞侠 阅读:

[导读] 之前讲过canvas绘制标准圆形动画,今天带来canvas绘制椭圆动画。 预览图: 效果预览: 绘制椭圆动画稍微麻烦点,涉及到数据公式。 长轴长我们用2a表示,短轴长我们用2b表示 假设椭圆...

之前讲过canvas绘制标准圆形动画,今天带来canvas绘制椭圆动画。

预览图:


image.png


效果预览:https://www.zixuephp.com/static/res/canvas/test/canvas-tround2.html


绘制椭圆动画稍微麻烦点,涉及到数据公式。



image.png


长轴长我们用2a表示,短轴长我们用2b表示

假设椭圆的长轴与X轴平行,那么表达式如下所示:


image.png


是不是看得很懵逼,如果是那是你数学没学好...

不过没关系,我们只需要记住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

添加评论