用canvas实现简易的雪花飘落效果

最新推荐文章于 2024-12-22 22:12:06 发布

原创

最新推荐文章于 2024-12-22 22:12:06 发布 · 868 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何利用canvas和requestAnimationFrame()实现一个简单的雪花飘落动画。通过不断刷新屏幕并更新雪花位置，营造出雪花飘落的视觉效果。代码示例及详细解释帮助读者理解实现过程。

需求：用canvas实现一个简易的雪花飘落的效果

思路：利用视觉短暂停留的原理，通过requestAnimationFrame() 每秒60次刷新屏幕，每次刷新都改变雪花的位置，从而构成雪花在移动的错觉

上代码！

HTML

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个雪花