<!DOCTYPE html>
<html>
<head>
    <title>太阳系</title>
</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>
</body>
</html>
        body{
            margin: 0px; padding: 0px;
        }

        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()
        }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.