【H5】canvas绘制太阳系

最新推荐文章于 2024-02-26 11:07:08 发布

舜岳

最新推荐文章于 2024-02-26 11:07:08 发布

阅读量1k

点赞数

分类专栏： HTML5 文章标签： HTML5 canvas

本文链接：https://blog.csdn.net/qq_41614928/article/details/90665789

版权

HTML5 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

【H5】canvas绘制太阳系

实现效果如下：

在这里插入图片描述

实现逻辑：

Star为一个主逻辑函数，通过调用此函数传递不同的参数和圆的位置来实例化各种球的运动

实现代码如下：

代码内有详解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        body{background-color: #000;overflow: hidden;}
        canvas{
            display:block;
            margin: -50px auto;
            border:2px solid #f00;
        }
    </style>
</head>
<body>
    <canvas id='canvas' width='1000' height='1000'></canvas>

    <script>
        let can = document.getElementById( 'canvas' );
        let ctx = can.getContext("2d");

        function drawBG(){  //刚开始画轨迹
            ctx.strokeStyle = "#fff"
            for( let i=0; i<8; i++){
                ctx.beginPath();
                ctx.arc( 500,500,(i+1)*50,0,2*Math.PI,false );
                ctx.stroke()
            }
        }

        //定义一个函数体，每个样式在它里面进行构造生成；
        //Star(开始时的位置x,开始时的位置y,半径radius,cycle:周期时间也就是旋转数度,内渐变色,外渐变色)
        function Star( x,y,radius, cycle , sColor , eColor ){
            /*
                x,y 代码元素所在的坐标；
                radius 半径
                cycle  周期（时间）
                sColor  开始的颜色 
                eColor  结束的颜色
            */
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.cycle = cycle;
            this.sColor = sColor;
            this.eColor = eColor;
            this.time = 0;
            this.color = null;  //定义初始的颜色值为空；
            this.draw = function(){
                ctx.save();
                ctx.translate( 500 , 500 );    //旋转基点定在画布的(500，500)
                //ctx.rotate()每执行一次时的旋转速度；( 360 / this.cycle  )*Math.PI/180   //Math.PI/180表示1度
                ctx.rotate( this.time*( 360 / this.cycle  )*Math.PI/180 );
                ctx.beginPath();    //一个画布的开始
                //进来就先绘画圆(圆的x坐标,圆的x坐标,圆的半径,圆的起始角度,终止角度,顺时针)
                ctx.arc( this.x,this.y,this.radius, 0,2*Math.PI,false ); 
                //createRadialGradient渐变色 设置渐变的两个圆 (1圆x,1圆y,1圆半径,2圆x,2圆y,2圆半径)
                this.color = ctx.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius)
                //赋值颜色； 渐变的内容介于0~1之间 这里0时的渐变颜色为参数sColor
                this.color.addColorStop( 0, this.sColor )
                //这里1时的渐变颜色为参数eColor
                this.color.addColorStop( 1, this.eColor )
                ctx.fillStyle = this.color; //把渐变颜色设置上去
                ctx.fill(); //并且填充到canvas画布上

                ctx.restore();      //一个画布的结束
                this.time +=1;  //时间加一 角度加一  每间20ms执行一次
            }
        }

        function Sun(){
            Star.call( this ,  0 , 0 , 30 , 0 ,"#f00" ,"#ff0" ) //改变this的指向；
        }
        function Mercury(){
            Star.call( this ,  0 , -50 , 5 , 87 ,"#ff0" ,"#00f" ) //改变this的指向；
        }
        function Venus(){
            Star.call( this ,  0 , -100 , 10 , 225 ,"pink" ,"purple" ) //改变this的指向；
        }
        function Earth(){
            Star.call( this ,  0 , -150 , 15 , 365 ,"blue" ,"yellow" ) //改变this的指向；
        }        
        function Mars(){
            Star.call( this ,  0 , -200 , 25 , 687 ,"#ff0" ,"#00f" ) //改变this的指向；
        }
        function Jupiter(){
            Star.call( this ,  0 , -250 , 20 , 4333 ,"white" ,"#f0f" ) //改变this的指向；
        }
        function Uranus(){
            Star.call( this ,  0 , -300 , 15 , 10760 ,"#fff" ,"#0ff" ) //改变this的指向；
        }
        function Neptune(){
            Star.call( this ,  0 , -350 , 20 , 30800 ,"#aaa" ,"#987" ) //改变this的指向；
        }
        function Saturn(){
            Star.call( this ,  0 , -400 , 10 , 60152 ,"#ff0" ,"#00f" ) //改变this的指向；
        }

        let sun = new Sun();        //实例化对象；
        let Mer = new Mercury();    //实例化对象；
        let Ven = new Venus();      //实例化对象；
        let Ear = new Earth();      //实例化对象；
        let Mar = new Mars();       //实例化对象；
        let Jup = new Jupiter();    //实例化对象；
        let Ur = new Uranus();      //实例化对象；
        let Ne = new Neptune();     //实例化对象；
        let Sat = new Saturn();     //实例化对象；

        function move(){
            //清除canvas画布所有内容
            ctx.clearRect( 0,0,can.width,can.height )
            sun.draw()
            Mer.draw();
            Ven.draw();
            Ear.draw();
            Mar.draw();
            Jup.draw();
            Ur.draw();
            Ne.draw();
            Sat.draw();
            drawBG()    //重新画轨迹
        }
        setInterval( move,20 )  //20ms执行一次 让它们运动起来

    </script>
</body>
</html>

舜岳

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
【H5】canvas绘制太阳系

【H5】canvas绘制太阳系实现效果如下：实现逻辑：Star为一个主逻辑函数，通过调用此函数传递不同的参数和圆的位置来实例化各种球的运动实现代码如下：代码内有详解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="v...
复制链接

扫一扫

专栏目录