canvas背景特效无规则变换

最新推荐文章于 2024-08-28 21:44:39 发布

挚友阳光

最新推荐文章于 2024-08-28 21:44:39 发布

阅读量174

点赞数

分类专栏：前端技术 JavaScript 文章标签： canvas

本文链接：https://blog.csdn.net/qq_41366114/article/details/118099932

版权

本文介绍如何使用HTML5 Canvas创建极具视觉吸引力的背景特效，通过编程实现元素的无规则变换，为网页增添动态美感。

摘要由CSDN通过智能技术生成

	<canvas id="canvas" width="830" height="938"></canvas>

var canvas,ctx,width,height,size,lines,tick;
		function line() {
   
			this.path = [];
			this.speed = rand(10, 20);
			this.count = randInt(10, 30);
			this.x = width / 2, +1;
			this.y = height / 2 + 1;
			this.target = {
   
				x: width / 2,
				y: height / 2
			};
			this.dist = 0;
			this.angle = 0;
			this.hue = tick / 5;
			this.life = 1;
			this.updateAngle();
			this.updateDist();
		}
		line.prototype.step = function(i) {
   
			this.x += Math.cos(this.angle) * this.speed;
			this.y += Math.sin(this.angle) * this.speed;
		
			this.updateDist();
		
			if (this.dist < this