js太阳系运行动画特效

PROMULGATOR

云淡风轻

美国科州布鲁姆菲尔德市县Level3公共DNS服务器

← js转换16进制

→ js数组筛选唯一值

相关代码

纯CSS3太阳系

纯CSS3制作萤火虫动画特效

太阳系行星旋转图CCS3

简单实用的下雪特效

纯css动画用于边框特效 2

css播放暂停按钮切换动画特效

按钮hover特效

Html

Css

Js

 #canvas {
	display:block;
	background-color:#000;
	margin:0 auto;
}

var canvas = document.getElementById("canvas");
var cxt = canvas.getContext('2d');
var time = 0;
var EarchRotate = 0;
var MoonX = 0;
var MoonY = 0;
//行星轨道
function starRoute() {
    for (var i = 0; i <= 8; i++) {
        cxt.save();
        cxt.translate(500, 500);
        cxt.strokeStyle = '#fff';
        cxt.beginPath();
        cxt.arc(0, 0, i * 55, 0, 2 * Math.PI, false);
        cxt.closePath();
        cxt.stroke();
        cxt.restore();
    }
}
//创建Start类型(其实在js中是对象)
function Star(name, x, y, r, startColor, endColor, revolution) {
    this.name = name; //星球名称
    this.x = x; //圆心  x,y
    this.y = y;
    this.r = r; //半径  r
    this.startColor = startColor; //渐变 start,end
    this.endColor = endColor;
    this.revolution = revolution; //公转周期 revolution
}
Star.prototype = {
    constructor: Star,
    drawStar: function() {
        cxt.save();
        cxt.translate(500, 500);
        //绘制渐变颜色
        var gradient = cxt.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.r);
        gradient.addColorStop(0, this.startColor);
        gradient.addColorStop(1, this.endColor);
        cxt.fillStyle = gradient;
        cxt.beginPath();
        if (this.name == '地球') {
            //存储转动的角度,找到moon的旋转坐标
            EarchRotate = time * 360 / this.revolution * Math.PI / 180;
            MoonX = 165 * Math.sin(EarchRotate);
            MoonY = -165 * Math.cos(EarchRotate);
            cxt.rotate(time * 360 / this.revolution * Math.PI / 180);
            cxt.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
            cxt.fill();
        } else if (this.name == '月球') {
            cxt.save();
            cxt.translate(MoonX, MoonY); //重置原点，即设置月球旋转中心
            //月球旋转轨迹
            cxt.beginPath();
            cxt.strokeStyle = 'rgba(207,207,207,0.2)';
            cxt.arc(0, 0, 30, 0, 2 * Math.PI, false);
            cxt.stroke();
            cxt.closePath();
            //月球圆心坐标
            var x = 30 * Math.cos((time * 360 / this.revolution - 90) * Math.PI / 180);
            var y = 30 * Math.sin((time * 360 / this.revolution - 90) * Math.PI / 180);
            cxt.rotate(time * 360 / this.revolution * Math.PI / 180);
            //月球的渐变颜色
            var gradientM = cxt.createRadialGradient(x, y, 0, x, y, this.r);
            gradientM.addColorStop(0, this.startColor);
            gradientM.addColorStop(1, this.endColor);
            cxt.fillStyle = gradientM;
            //绘制月球
            cxt.beginPath();
            cxt.arc(x, y, this.r, 0, 2 * Math.PI, false);
            cxt.closePath();
            cxt.fill();
            cxt.restore();
        } else {
            cxt.rotate(time * 360 / this.revolution * Math.PI / 180);
            cxt.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
            cxt.fill();
        }
        cxt.closePath();
        cxt.restore();
        //加上字体
        cxt.save();
        cxt.translate(500, 500);
        cxt.fillStyle = '#fff';
        cxt.font = "bold " + 0.9 * this.r + "px Arial";
        cxt.textAlign = "center";
        cxt.textBaseline = "middle";
        // cxt.rotate(time*360/this.revolution*Math.PI/180)
        if (this.name == '太阳') {
            cxt.fillText(this.name, this.x, this.y);
        } else if (this.name == '月球') {
            cxt.fillText('', this.x, this.y); //月球太小，字体不显示
        } else {
            cxt.fillText(this.name, this.x + 50, this.y);
        }
        cxt.restore();
    }
}

function moveStar() {
    cxt.clearRect(0, 0, 1000, 1000); //首先清除画布
    starRoute();
    var Sun = new Star('太阳', 0, 0, 25, '#ffff00', '#ff9900', 0);
    var Mercury = new Star('水星', 0, -55, 8, '#a69697', '#5c3e40', 87.70); //水星
    var Venus = new Star('金星', 0, -110, 13, '#c4bbac', '#1f1315', 224.701); //金星
    var Earth = new Star('地球', 0, -165, 18, '#78b1e8', '#050c12', 365.2422); //地球
    var Moon = new Star('月球', 0, -195, 6, '#a69697', '#5c3e40', 27.32); //月球
    var Mars = new Star('火星', 0, -220, 10, '#cec9b6', '#76422d', 686.98); //火星
    var Jupier = new Star('木星', 0, -275, 25, '#c0a48e', '#322222', 4332.589); //木星
    var Saturn = new Star('土星', 0, -330, 23, '#f7f9e3', '#5c4533', 10759.5); //土星
    var Uranus = new Star('天王星', 0, -385, 20, '#a7e1e5', '#19243a', 30799.095); //天王星
    var Neptune = new Star('海王星', 0, -440, 20, '#0661b2', '#1e3b73', 60152); //海王星
    Sun.drawStar();
    Mercury.drawStar();
    Venus.drawStar();
    Earth.drawStar();
    Moon.drawStar();
    Mars.drawStar();
    Jupier.drawStar();
    Saturn.drawStar();
    Uranus.drawStar();
    Neptune.drawStar();
    time++;
}
setInterval(moveStar, 100)

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js太阳系运行动画特效



代码描述：js太阳系运行动画特效代码

更新时间：2024-04-07 08:48:43
太阳系动画特效

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>js太阳系运行动画特效-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号