纯js完成canvas星空粒子效果

PROMULGATOR

Miss李

四川省成都市

← jQuery中英文切换(原创)

→ 原生JS代码实现自动TAB切换（原创）

相关代码

纯js完成canvas星空粒子效果

canvas旋转3d星空粒子

canvas五角星、满天星、星空

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 = 300; //最大粒子数
    this.maxSize = 4; //初始化最大的大小
    this.halfWidth = w / 2,
        this.halfHeight = h / 2;
    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,
            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) {
        if (item.posz > -item.fl) {
            /*连续修改scale，保持变化，用于控制量子大小，在屏幕上的位置*/
            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;
            item.posz -= item.speed;
        } else {
            /*初始化超出屏幕的量子。达成屏幕量子数量保持衡量的方法*/
            item.posz = Math.random() * 250;
        }
        this.add(item);
    }
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

立即下载

纯js完成canvas星空粒子效果



代码描述：利用canvas完成星空效果

更新时间：2019-10-27 23:09:45
在摸索canvas的时候制作的动态效果。以后还会有更多对于canvas的作品。毕竟是想用canvas做游戏的一个菜鸟前端。
window.requestanimationframe是window里面自带的方法，告诉浏览器你希望执行一个动画，这个动画会在下一次重绘之后调用回调函数。有疑问或可以了解这个链接
https://developer.mozilla.org/zh-cn/docs/web/api/window/requestanimationframe
其中画布的清空就是重新给画布的width，height赋值。就达到了清空画布的效果。因为动画是一帧一帧连起来的，所以必须在重绘的时候清空画布。
其中比较重点的就是怎么形成这种像3d的效果，这里的处理方法是初始化绘制了圆形的大小，坐标之后，对圆形的大小进行由小到大的变化。达到视觉上的3d效果。超出画布的圆形将会被重新初始化。这就保证了画布里面的粒子数量固定。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯js完成canvas星空粒子效果-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号