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

helloFE

于 2020-01-22 16:01:31 发布

阅读量851

点赞数

CC 4.0 BY-SA版权

分类专栏：小案例

本文链接：https://blog.youkuaiyun.com/helloFE/article/details/104070631

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：用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个雪花

最低0.47元/天解锁文章