网站地图    收藏    合作   

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

canvas抛物线动画之抛物线公式

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

[导读] 今天代码真正的根据抛物线公式得出的抛物线动画。 思维导图: 思路: 根据抛物线数学公式 y = a*x*x +b*x +c 1: c是于Y轴交点,假设A点是原点那么C是0 2: 所以 y = a*x*x + b *x 3: a是决定抛物...

今天代码真正的根据抛物线公式得出的抛物线动画。

1620315331713488.png


思维导图:

image.png

思路:

根据抛物线数学公式 y = a*x*x +b*x +c 

1: c是于Y轴交点,假设A点是原点那么C是0

2: 所以 y = a*x*x + b *x

3: a是决定抛物线向上还是向下因素,数值越小约平滑,如果是0就会是直线了,所以设置 0.003.

4: 所以 b = ( a*x*x) / x

5: x是单位时间内运行的 A->B的区间距离, 可以根据定时器次数(设定多少次执行完动画的次数)

6: 我为了省事将动画执行50次,所以我的 x = A->B距离 / 50 * 档次执行次数

将思路带入程序:

<!DOCTYPE html>
<html>
<head>
    <title>太阳系</title>
    <style type="text/css" media="screen">
        body{
            margin: 0px; padding: 0px;
        }
    </style>
</head>
<body>
    <div id="canvas-warp">
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 0px auto;  width: 800; height: 500px;">
        你的浏览器居然不支持Canvas?!赶快换一个吧!!
    </canvas>
    </div>
    <script type="text/javascript">
 
        window.requestAnmFrame = (function(){
            return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequstAnimationFrame || window.oRequetAnimationFrame || window.msRequestAnimationFrame || function(callback){
                window.setTimeout(callback, 100/60)
            };
        })();
 
        var obj = {
            canvasEr:null,
            canvasContent: null,
            data: {
                a1x:100,
                a1y:400,
                b1x:600,
                b1y:200,
                num:1,    
        		radian:-0.003, // 曲线弧度, >0 开口向上 <0 开口向下
                cont:50,
                b:0
            },
            init:function(){
                var canvas = document.getElementById("canvas");
                canvas.width = 800;
                canvas.height = 500;
                obj.canvasEr = canvas;
                obj.canvasContent = canvas.getContext('2d');
 
                var dy = Math.abs(obj.data.b1y - obj.data.a1y);
                var dx = Math.abs(obj.data.b1x - obj.data.a1x);
                this.data.dy = dy;
                this.data.dx = dx;

                // 公式 y = a*x*x + b*x + c , b = (y - a*x*x) / x 
                this.data.b = (dy - this.data.radian * dx * dx) / dx

                this.autoDraw()
                this.drawA()
 
            },
            // 绘制标准
            drawA(){
                // obj.clearReact(); // 清除画布
                var x = obj.data.x, y = 200, r = 50;               
                var _ob = obj.drawArc({
                    x:obj.data.a1x,
                    y:obj.data.a1y,
                    r:20,
                    lcorlor:'yellow',
                    bgcolor: 'red',
                    isFull: true
                }).
                drawArc({
                    x:obj.data.b1x,
                    y:obj.data.b1y,
                    r:20,
                    lcorlor:'yellow',
                    bgcolor: 'red',
                    isFull: true
                })
 
            },
            drawB() {
                //this.clearReact();
                this.drawA();
                var _ax1 = this.data.dx / this.data.cont * obj.data.num;
                var _ay1 = this.data.radian * _ax1 * _ax1 + this.data.b * _ax1;
 
                obj.drawArc({
                    x:obj.data.a1x + _ax1,
                    y:obj.data.a1y - _ay1,
                    r:20,
                    lcorlor:'red',
                    bgcolor: 'yellow',
                    isFull: true
                })
 
                obj.data.firstAngle -= obj.data.pxAngle
            },
            clearReact: function(){
                obj.canvasContent.clearRect(0, 0, 800, 500);
            },
            moveTo:function(x,y){
                obj.canvasContent.moveTo(x, y);
            },
            /**
             * @author lucky
             * @DateTime 2021-05-02T22:56:11+0800
             * @param    {[type]}                 pms [x,y,r,lw,lcorlor,bgcolor,isFull ,isStroke ,firstAngle, endAngle, anticlockwise]
             * @return   {[type]}                     [obj]
             */
            drawArc:function(pms){
                if (!pms || typeof pms !== 'object') {
                    return
                }
                var _firstAngle = typeof pms.firstAngle === 'number' ? pms.firstAngle : 0,
                _endAngle = typeof pms.endAngle === 'number' ? pms.endAngle : Math.PI * 2,
                _isFull = typeof pms.isFull === 'boolean'? pms.isFull : true,
                _isStroke = typeof pms.isStroke === 'boolean' ? pms.isStroke : true,
                _anticlockwise = typeof pms.anticlockwise === 'boolean' ? pms.anticlockwise : false;
                this.moveTo(pms.x,pms.y);
                obj.canvasContent.beginPath();
                obj.canvasContent.arc(pms.x, pms.y, pms.r, _firstAngle, _endAngle, _anticlockwise);
                // 设置属性
                obj.canvasContent.lineWidth = pms.lw;
                obj.canvasContent.fillStyle = pms.bgcolor;
                _isFull && obj.canvasContent.fill();
                // 绘制路径
                obj.canvasContent.strokeStyle = pms.lcorlor;
                _isStroke && obj.canvasContent.stroke();
                obj.canvasContent.closePath();
                return obj;
            },
            autoDraw: function(){
                // console.log('执行自动绘制',obj.data.num)
                if (obj.data.num > obj.data.cont){
                    return
                }
                obj.drawB()
                obj.data.num ++
                // 动画
                requestAnmFrame(obj.autoDraw)
                 
            }
 
        }
 
        window.onload = function(){
            obj.init()
        }
 
 
    </script>
</body>
</html>


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论