Canvas的简单小实例

文君 2019年06月23日 •   •  471 •  2

html

<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <canvas id="canvas" width="1000" height="1000" style="background:url(img/sky4.jpg);">
            您的浏览器不支持
        </canvas>
        <script>
            //设置2D绘图环境
            var cxt = document.getElementById("canvas").getContext('2d');

            //画出星球的轨道
            function drawTrack() {
                for(var i = 0; i < 8; i++) {
                    cxt.beginPath();
                    cxt.arc(500, 500, (i + 1) * 50, 0, 360, false);
                    cxt.closePath();

                    //设置颜色
                    cxt.strokeStyle = "#fff";
                    cxt.stroke();

                }
            }
            drawTrack();
            //星球
            function Star(x, y, radius, cycle, kColor, jColor) {
                //星球的坐标点
                this.x = x;
                this.y = y;

                //星球的半径
                this.radius = radius;
                //公转周期
                this.cycle = cycle;
                //星球开始的颜色(开始色和结束色)
                this.kColor = kColor;
                this.jColor = jColor;
                //新建一个渐变颜色的空对象
                this.color = null;
                //设置一个计时器
                this.time = 0;

                this.draw = function() {
                    //保存之前的画布内容
                    cxt.save();
                    //重置0,0坐标点
                    cxt.translate(500, 500);
                    //设置旋转角度
                    cxt.rotate(this.time * (360 / this.cycle) * Math.PI / 180);
                    //画星球
                    cxt.beginPath();
                    cxt.arc(this.x, this.y, this.radius, 0, 360, false);
                    cxt.closePath();
                    //设置星球的填充颜色
                    //新建渐变对象
                    this.color = cxt.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
                    //设置渐变效果
                    this.color.addColorStop(0, this.kColor); //渐变颜色开始点
                    this.color.addColorStop(1, this.jColor); //渐变颜色结束点
                    //将渐变对象赋值给填充画笔
                    cxt.fillStyle = this.color;
                    //填充星球
                    cxt.fill();

                    //恢复之前保存的画布内容
                    cxt.restore();
                    //执行完毕以后时间增加
                    this.time += 1;

                }

            }
            //创建太阳的构造函数
            function Sun() {
                Star.call(this, 0, 0, 30, 0, "#FFA500", "#FF0000");

            }
            //创建一个水星的构造方法
            function SX() {
                Star.call(this, 0, -50, 20, 87.70, "#A69697", "#5C3E40");
            }
            //创建一个金星的构造方法
            function JX() {
                Star.call(this, 0, -100, 20, 224.701, "#FFD700", "#1F1315");
            }
            //创建一个地球的构造方法
            function Earth() {
                Star.call(this, 0, -150, 20, 365.2422, "#87CEEB", "#1E3B73");
            }
            //创建一个火星的构造方法
            function HX() {
                Star.call(this, 0, -200, 20, 686.98, "#FF4500", "#76422D");
            }

            //创建一个木星的构造方法
            function MX() {
                Star.call(this, 0, -250, 20, 4332.589, "#C0A48E", "#322222");
            }
            //创建一个土星的构造方法#DAA520
            function TX() {
                Star.call(this, 0, -300, 20, 10759.5, "#DAA520", "#8B4513");
            }
            //创建一个天王星的构造方法
            function TWX() {
                Star.call(this, 0, -350, 20, 30799.095, "#5F9EA0", "#19243A");
            }
            //创建一个海王星的构造方法
            function HWX() {
                Star.call(this, 0, -400, 20, 60152, "#00BFFF", "#050C12");
            }

            //分别创建各个星球对象的实例
            var sun = new Sun();
            var sx = new SX();
            var jx = new JX();
            var earth = new Earth();
            var hx = new HX();
            var mx = new MX();
            var tx = new TX();
            var twx = new TWX();
            var hwx = new HWX();

            function move() {
                //清除画布
                cxt.clearRect(0, 0, 1000, 1000)
                //画出轨道
                //drawTrack();
                //画出每个星球
                sun.draw();
                sx.draw();
                jx.draw();
                earth.draw();
                hx.draw();
                mx.draw();
                tx.draw();
                twx.draw();
                hwx.draw();

            }
            //使每个星球进行运动
            setInterval(move, 10);
        </script>
    </body>

</html>

图示(中间的太阳星球有点假,请忽略 哈哈哈 嗝~)

Sun.gif

Tags:none
上一篇
下一篇

该页面评论已关闭

已有 2 条评论

雨落凋殇
 雨落凋殇 2 个月前 • |

Canvas画布作图,挺好看的呀。

夜之零
 夜之零 2 个月前 • |

挺好看的呀