关于HTML5，了解得很少。-优快云博客

本文链接：https://blog.youkuaiyun.com/ab1233369ab/article/details/10235137

<!DOCTYPE html>
<html>
<head>
	<title>尝鲜</title>
	<meta charset="UTF-8" />

	<link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/style.css">
	
	<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/verlet-1.0.0.min.js"></script>
</head>
<body>
	<canvas id="scratch" style="width: 800px; height: 500px; background: #000;"></canvas>
	<script type="text/javascript">

	function lerp(a, b, p) {
		return (b-a)*p + a;
	}
	
	window.onload = function() {
		var canvas = document.getElementById("scratch");

		// canvas dimensions
		var width = parseInt(canvas.style.width);
		var height = parseInt(canvas.style.height);

		// retina
		var dpr = window.devicePixelRatio || 1;
		canvas.width = width*dpr;
		canvas.height = height*dpr;
		canvas.getContext("2d").scale(dpr, dpr);

		// simulation
		var sim = new VerletJS(width, height, canvas);
		sim.friction = 1;
		sim.highlightColor = "#fff";
		
		// entities
		var min = Math.min(width,height)*0.5;
		var segments = 20;
		var cloth = sim.cloth(new Vec2(width/2,height/3), min, min, segments, 6, 0.9);
		
		cloth.drawConstraints = function(ctx, composite) {
			var stride = min/segments;
			var x,y;
			for (y=1;y<segments;++y) {
				for (x=1;x<segments;++x) {
					ctx.beginPath();

					var i1 = (y-1)*segments+x-1;
					var i2 = (y)*segments+x;
					
					ctx.moveTo(cloth.particles[i1].pos.x, cloth.particles[i1].pos.y);
					ctx.lineTo(cloth.particles[i1+1].pos.x, cloth.particles[i1+1].pos.y);
					
					ctx.lineTo(cloth.particles[i2].pos.x, cloth.particles[i2].pos.y);
					ctx.lineTo(cloth.particles[i2-1].pos.x, cloth.particles[i2-1].pos.y);
					
					var off = cloth.particles[i2].pos.x - cloth.particles[i1].pos.x;
					off += cloth.particles[i2].pos.y - cloth.particles[i1].pos.y;
					off *= 0.25;
					
					var coef = Math.round((Math.abs(off)/stride)*255);
					if (coef > 255)
						coef = 255;
					
					ctx.fillStyle = "rgba(" + coef + ",0," + (255-coef)+ "," +lerp(0.25,1,coef/255.0)+")";
					
					ctx.fill();
				}
			}
			
			var c;
			for (c in composite.constraints) {
				if (composite.constraints[c] instanceof PinConstraint) {
					var point = composite.constraints[c];
					ctx.beginPath();
					ctx.arc(point.pos.x, point.pos.y, 1.2, 0, 2*Math.PI);
					ctx.fillStyle = "rgba(255,255,255,1)";
					ctx.fill();
				}
			}
		}
		
		cloth.drawParticles = function(ctx, composite) {
			// do nothing for particles
		}
		
		// animation loop
		var legIndex = 0;
		var loop = function() {
			sim.frame(16);
			sim.draw();
			requestAnimFrame(loop);
		};

		loop();
	};
	
	
	</script>
	
</body>
</html>

源网址不知道在哪里了，这种特效保留一张