需求: 用canvas实现一个简易的雪花飘落的效果
思路: 利用视觉短暂停留的原理,通过requestAnimationFrame() 每秒60次刷新屏幕,每次刷新都改变雪花的位置,从而构成雪花在移动的 错觉
上代码!
HTML
<canvas id="canvas" width="100" height="100"></canvas>
JS
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
let dots = [];
let snowsLen = 100
canvas.style.width = window.innerWidth;
canvas.style.height = window.innerHeight;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 初始化100个雪花