Canvas实现HTML动态粒子效果背景

最新推荐文章于 2025-07-05 07:30:00 发布

拾不到一片光

最新推荐文章于 2025-07-05 07:30:00 发布

阅读量1w

点赞数 5

CC 4.0 BY-SA版权

分类专栏：页面效果文章标签： canvas JavaScript

本文链接：https://blog.youkuaiyun.com/qq_35017200/article/details/79685912

之前参考诸多博客，发现许多博主自定义的博客主页都会有很多动态的小粒子在页面漂浮，鼠标经过还会有响应事件，在这里，将代码记录一下。

首先，在html页面要先定义一个canvas元素：

<canvas id="cas"></canvas>

然后，对应的js文件

        var canvas = document.getElementById("cas");
	var ctx = canvas.getContext("2d");
	resize();
	window.onresize = resize;

	function resize() {
		canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
		canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	}
	var RAF = (function() {
		return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
			window.setTimeout(callback, 1000 / 60);
		};
	})();
	// 鼠标活动时，获取鼠标坐标
	var