原生JS Canvas 粒子漂浮效果（详细注释）

其实用Canvas 实现粒子效果很简单。

知道 Canvas 怎么画出圆形（ arc 函数），圆形的移动就是 arc 函数定位参数变化的问题。

// x、y 变化 并且 每帧重绘 ，让我们看 圆形 像是 动起来了
context.arc(x,y,r,sAngle,eAngle,counterclockwise);

//获取 页面上 canvas 标签
var myCavans = document.getElementById('myCavans');
//设置 canvas画布的 width height （window的width、height ，全屏展示）
myCavans.width = window.innerWidth;
myCavans.height = window.innerHeight;// 定义画布 2D 画布 ，获取 上下文 。
var ctx = myCavans.getContext('2d');
// 初始化 鼠标位置
let mouse = {x: 0,y: 0
}
// 绑定 鼠标移动事件，修改 mouse 对象中的 鼠标坐标 。
window.addEventListener('mousemove', function (event) {mouse.x = event.clientX;mouse.y = event.clientY;
})
// 绑定 浏览器大小变化 监听，动态调整canvas画布 width height
window.addEventListener('resize', function () {myCavans.width = window.innerWidth;myCavans.height = window.innerHeight;
})
// 节点 最大半径，防止鼠标靠近方法中的 节点无限制变大
let maxRadius = 40;// 节点对象
/**
* x,y 代表 浏览器绘制 节点的坐标
* dx,dy 代表 节点移动的速度
* r 半径
* color 节点颜色
*/
function Ball(x, y, dx, dy, r, color) {this.x = x;this.y = y;this.dx = dx;this.dy = dy;this.r = r;this.color = color;// 节点绘制方法 this.draw = function () {// 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。ctx.beginPath();// 定义画笔 颜色ctx.fillStyle = this.color;ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);// 通过填充路径的内容区域生成实心的图形。ctx.fill();// 闭合路径之后图形绘制命令又重新指向到上下文中。ctx.closePath();}// 更新 节点 每个属性（以达到 漂浮效果、鼠标靠近、鼠标远离等效果）this.update = function () {// 防止 X轴 节点生成到 边界外边 或者 边界上 。if ((this.x + this.r) > myCavans.width || (this.x - this.r) < 0) {this.dx = -this.dx;}// 防止 Y轴 节点生成到 边界外边 或者 边界上。 if ((this.y + this.r) > myCavans.height || (this.y - this.r) < 0) {this.dy = -this.dy;}// 时刻变化的 x、y 就是 节点移动的奥秘。 dx、dy 就是节点移动速度调节参数。this.x = this.x + this.dx;this.y = this.y + this.dy;// 每一帧刷新 画布 会 遍历所有节点 ，计算 所有节点 距离 鼠标的像素值， 靠近鼠标节点半径变大，远离则变小if (mouse.x - this.x < 50 && mouse.x - this.x > -50&& mouse.y - this.y < 50 && mouse.y - this.y > -50) {if (this.r < maxRadius) {this.r++;}} else {if (this.r > r) {this.r--;}}this.draw();}
}let ballArr = [];
let colorArr = ['#248EA6', '#25C7D9', '#F2D338', '#F2762E', '#F23030'];
// 循环 随机属性生成 300个节点
for (let i = 0; i < 300; i++) {let radius = Math.random() * 4 + 1;let x = Math.random() * (myCavans.width - 2 * radius) + radius;let y = Math.random() * (myCavans.height - 2 * radius) + radius;let dx = (Math.random() - 0.5) * 2;let dy = (Math.random() - 0.5) * 2;let color = colorArr[Math.floor(Math.random() * 5)];let ball = new Ball(x, y, dx, dy, radius, color);ballArr.push(ball);
}// 动画
function animate() {//// 浏览器 每一帧 调用一次 指定的函数 requestAnimationFrame(animate);ctx.clearRect(0, 0, myCavans.width, myCavans.height);// 遍历 节点数组 ，执行节点对象 update 函数for (let ball of ballArr) {ball.update();}
}animate();

原生JS Canvas 粒子漂浮效果（详细注释）相关推荐

html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
matlab 模拟心电图,使用原生js+canvas实现模拟心电图的实例
从2015年2月转行进入IT行业,到现在也有将近两年的时间了,从最开始的java到现在的前端,前进的路上一直靠自己摸索,一路走到现在,前端大神是绝对谈不上的,最多算一只刚入门的菜鸟. 从最开始的懵懵懂 ...
java心电图_使用原生js+canvas实现模拟心电图
从2016年2月转行进入IT行业,到现在也有将近两年的时间了,从最开始的java到现在的前端,前进的路上一直靠自己摸索,一路走到现在,前端大神是绝对谈不上的,最多算一只刚入门的菜鸟. 从最开始的懵懵懂 ...
html五子棋悔棋,原生 JS + Canvas 实现五子棋游戏
原标题:原生 JS + Canvas 实现五子棋游戏 || 一.功能模块先看下现在做完的效果: 线上体验: https://wj704.github.io/five_game.html 主要功能模块 ...
五子棋人机对战_原生JS+Canvas实现五子棋游戏
原生JS+Canvas实现五子棋游戏效果图主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能二.代码详解 2.1 人机对战功能实现从效果图可以看到,棋盘的横竖可以放的位置为15 ...
【学习随记】原生js canvas 画海报
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
html五子棋游戏制作原理,原生JS+Canvas实现五子棋游戏
功能模块先看下现在做完的效果: 代码详解人机对战功能实现从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = f ...
用原生js实现刮奖效果
用原生js实现简单的刮奖效果效果图分析:这是运用canvas来做的,页面结构为一个canvas和一张图片.canvas在最上层,图片在最下层.canvas与图片宽高一致.首先在canvas上填充灰 ...
图片五子棋PHP接口,原生JS+Canvas实现五子棋游戏实例
一.功能模块先看下现在做完的效果: 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能二.代码详解 2.1 人机对战功能实现从效果图可以看到,棋盘的横竖可以放的位置为15*15, ...

原生JS Canvas 粒子漂浮效果（详细注释）

原生JS Canvas 粒子漂浮效果（详细注释）相关推荐

最新文章

热门文章

原生JS Canvas 粒子漂浮 效果 （详细注释）

原生JS Canvas 粒子漂浮 效果 （详细注释）相关推荐

最新文章

热门文章

原生JS Canvas 粒子漂浮效果（详细注释）

原生JS Canvas 粒子漂浮效果（详细注释）相关推荐