前言

canvas实现前端的特效美术

结果展示

代码

`html`

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="./main.js"></script>
</body>
</html>

`main.js`

/*
*粒子化类构造*类功能：*1.初始化。创建画布，规定粒子属性等；*2.创建图像并且进行绘制 *3.区域颜色定义*4.粒子移动和偏射角度
*/// 生成粒子
let Particle = function(context, options){let random = Math.random();this.context = context;// 在画布里的x坐标this.x = options.x;// 在画布里的y坐标this.y = options.y;// 取随机数的1/2，对角度进行随机放大this.s = 0.5 + Math.random();// this.s = 1 + Math.random();// 粒子运动的变化角度this.a = 0;// 宽度this.w = window.innerWidth;// 高度this.h = window.innerHeight;// 半径this.radius = options.radius || 0.5 + Math.random() * 10;// 颜色this.color = options.color || "#E5483F";// console.log(this.color);// 指定3秒后调用；// 如果粒子的半径大于0.5,加入新的粒子。setTimeout(function(){if(this.radius > 0.5){particles.push(new Particle(context, {x: this.x,y: this.y,color: this.radius / 2 > 1 ? "#d6433b" : "#FFFFFF",radius: this.radius / 2.2 }));}}.call(Particle), 3000);
};// 渲染图像
Particle.prototype.render = function() {//从(0,0)开始新的路径；this.context.beginPath();// 创建曲线弧this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);// 绘图的线条宽度this.context.lineWidth = 2;//颜色填充 this.context.fillStyle = this.color;// 填充当前图像的路径this.context.fill();// 返回初始点,并且绘制线条到初始位置this.context.closePath();
};Particle.prototype.swapColor = function() {// 排除白色if (this.color != "#FFFFFF") {// 判断左右界面,并且赋颜色的值if (this.x < this.w / 2) {// 左半边this.color = "#36fcfa";            } else {// 右半边this.color = "#E5483F";            }}};Particle.prototype.move = function() {// 颜色定义this.swapColor();// 横坐标按照cos角度进行变换，并且对其进行随机数放大；// 偏射角度以便两个半界分开this.x += Math.cos(this.a) * this.s;this.y += Math.sin(this.a) * this.s;// this.y += Math.cos(this.a) * this.s;// this.x += Math.sin(this.a) * this.s;// 在变化后，对随机角度进行再重取；this.a += Math.random() * 0.8 - 0.4;// 判断全为0，粒子横坐标无移动；if (this.x < 0 || this.x > this.w - this.radius) {return false;}// 粒子纵坐标无移动；if (this.y < 0 || this.y > this.h - this.radius) {return false;}// 重新绘制图像this.render();return true;
};let canvas = document.createElement('canvas');
canvas.width = window.innerWidth - 20;
canvas.height = window.innerHeight - 30;
document.body.insertBefore(canvas, null);
let context = canvas.getContext('2d');const conf = {frequency: 50,x: canvas.width,y: canvas.height
};let particles = [],frequency = conf.frequency;setInterval(function(){popolate();
}.bind(null), frequency);function popolate(){particles.push(new Particle(context, {x: conf.x / 2,y: conf.y / 2}));return particles.length;
}function clear() {context.globalAlpha = 0.04;context.fillStyle = '#000042';context.fillRect(0,0,canvas.width, canvas.height);context.globalAlpha = 1;
}function update(){particles = particles.filter(p => p.move());clear();requestAnimationFrame(arguments.callee);
}update();

canvas-随机粒子特效相关推荐

canvas实现粒子特效
canvas实现粒子特效前言前段时间在学习canvas,实现了一些有趣的功能,最近有时间就把它拿出来分享一下. 成品图思路将这个功能先分析拆解一下: 一张画布上放一个背景图有很多小球在运动 ...
canvas文字粒子特效
想要实现文字的粒子话,最重要的两点是: 1.需要了解canvas的2d上下文的getImageData方法 getImageData() 方法返回 ImageData 对象,该对象拷贝了画布指定矩形的 ...
jQuery canvas碎片粒子组成爱心图形动画特效
style.css代码: /* latin-ext */ @font-face {font-family: 'Lato';font-style: normal;font-weight: 900;src ...
粒子背景php,html5+canvas圆形粒子移动背景动画特效
html5+canvas圆形粒子移动背景动画特效 this.update = function () { var lastPoint = { x: _this.x, y: _this.y }; // ...
html制作的动态粒子图像,一种基于AnimateCC+Canvas的随机粒子动画效果设计
潘博摘要:粒子动画是一种应用广泛的动画效果,也有不同的制作方法.Animate CC是Flash的延续和发展,在动画制作方面功能强大,而Canvas是HTML5在网页中绘制图形.制作动画的核心元素. ...
canvas圆圈粒子js特效背景
下载地址 canvas绘制的圆圈样式粒子特效背景,带鼠标跟随效果的粒子特效HTML5动画. dd:
html、css、js粒子特效——前端
html.css.js粒子特效--前端看看效果图首先是html结构使用canvas设置一个画布 <canvas width="500px" height="5 ...
cesium 粒子特效
鼠标左键单击实现添加粒子特效,右击停止添加代码如下: function fireadd() {var firejingdu = 116.6554885;var fireweidu = 39.545 ...
canvas文字粒子效果 html+css+js 3点饮茶，7点放工，美滋滋~
先言: 今天3点多在饮茶的时候,发现有好几天没水文章了,但是太难的玩意又不会啊,咋办,突然想起电脑里还有存着一个文字粒子特效,好家伙,这不就来了,先看效果如下: 因为gif图最大5m,但是这东西演示 ...

canvas-随机粒子特效

文章目录

前言

结果展示

代码

`html`

`main.js`

canvas-随机粒子特效相关推荐

最新文章

热门文章