canvas旋转3d星空粒子

PROMULGATOR

Miss李

四川省成都市

← js自动数字自动转换为人民币样式

→ jQuery中英文切换(原创)

相关代码

canvas旋转3d星空粒子

纯js完成canvas星空粒子效果

canvas旋转球

canvas五角星、满天星、星空

Html

Css

Js

* {
	padding:0;
	margin:0;
}
html {
	background-image:-webkit-radial-gradient(ellipse farthest-corner at center top,#000d4d 0%,#000105 100%);
	background-image:radial-gradient(ellipse farthest-corner at center top,#000d4d 0%,#000105 100%);
}

var canvas = mycanvas;
/*获取屏幕宽高。用作适配*/
var w = window.innerWidth;
var h = window.innerHeight;
canvas.width = w;
canvas.height = h;
canvas.backgroundColor = "#000";
var ctx = canvas.getContext('2d');

function Build() {
    this.ctx = ctx;
    this.counts = 200; //最大粒子数
    this.maxSize = 4; //初始化最大的大小
    this.halfWidth = w / 2,
        this.halfHeight = h / 2;
    this.ratate = Math.PI / 2 / 100; /*初始化旋转数据*/
    this.arr = []; //用于存储变量
}
Build.prototype.add = function(coor) {
    var grd = this.ctx.createRadialGradient(coor.x, coor.y, coor.size / 2, coor.x, coor.y, coor.size);
    grd.addColorStop(0, "white");
    grd.addColorStop(1, coor.color);
    this.ctx.fillStyle = grd;
    this.ctx.beginPath();
    this.ctx.arc(coor.x, coor.y, coor.size, 0, Math.PI * 2, true);
    this.ctx.transform(1, 0, 0, 1, 0, coor.z);
    this.ctx.closePath();
    this.ctx.fill();
}
Build.prototype.init = function() {
    this.run();
    this.render();
    this.animate();
}
Build.prototype.run = function() {
    var nums = 0;
    while (nums < this.counts) {
        var coor = {
            x: Math.ceil(Math.random() * w),
            y: Math.ceil(Math.random() * h),
            posx: Math.random() * w - this.halfWidth,
            posy: Math.random() * h - this.halfHeight,
            fl: 100,
            size: 100,
            speed: Math.random() * 2,
            posz: Math.random() * 250,
            r: Math.ceil(Math.random() * this.maxSize),
            color: "rgba(" + Math.ceil(Math.random() * 255) + "," + Math.ceil(Math.random() * 255) + "," + Math.ceil(Math.random() * 255) + "," + Math.random() + ")"
        };
        this.arr.push(coor);
        nums++;
    }
}
Build.prototype.clear = function() {
    ctx.clearRect(0, 0, w, h);
}
Build.prototype.render = function() {
    this.clear();
    for (var item of this.arr) {
        this.draw(item);
    }
}
Build.prototype.animate = function() {
        var _this = this;
        this.render();
        /*api自带方法*/
        window.requestAnimationFrame(function() {
            _this.animate();
        });
    },
    Build.prototype.draw = function(item) {
        /*计算旋转时的x，y的坐标转换*/
        var cosy = Math.cos(this.ratate),
            siny = Math.sin(this.ratate),
            x1 = item.posx * cosy + item.posz * siny,
            z1 = item.posz * cosy - item.posx * siny;
        item.posx = x1;
        item.posz = z1;

this.add(item);

if (item.posz > -item.fl) {
            var scale = item.fl / (item.fl + item.posz);
            item.x = this.halfWidth + item.posx * scale;
            item.y = this.halfHeight + item.posy * scale;
            item.size = item.r * scale;
        }
    }
var app = new Build();
app.init();
window.addEventListener('resize', function() {
    canvas.width = w = window.innerWidth;
    canvas.height = h = window.innerHeight;
}, false);

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

立即下载

canvas旋转3d星空粒子



代码描述：canvas旋转3d星空粒子

更新时间：2019-10-29 00:17:36
旋转跳跃我闭着眼。这个版本是基于上一份《纯js完成canvas星空粒子》代码的改动版，增加了旋转，本来是想模仿jquery库的背景特效中的一种效果。不过还需要再研究优化优化。
代码改动不大，增加了的部分是基于一个初始值math.pi/n的角度计算x，y值的改变。完成持续改变的效果。主要代码是 build.prototype.draw。里面是动态修改x，y的值达到3d的效果。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas旋转3d星空粒子-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号