原生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 () {