首页 > 其他分享> > canvas绘制水波球

canvas绘制水波球

2021-02-03 09:59:27 作者：互联网

利用canvas绘制水波球，效果图如下：

前端代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf8">
		<title>水波</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				border: 0;
			}

			html, body {
				height: 100%;
				width: 100%;
				overflow: hidden;
				z-index: 0;
				position: relative;
				background: #F5F5F5;
			}

			body {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			canvas {
				height: 200px;
				width: 200px;
				background: white;
				border-radius: 50%;
				padding: 5px;
				box-shadow: 0px 0px 10px 1px #009688;
			}
		</style>
	</head>
	<body>
		<canvas id="water-circle"></canvas>
		<script type="text/javascript">
			const waterCircle = document.getElementById('water-circle'),
				width = waterCircle.width = waterCircle.offsetWidth,
				height = waterCircle.height = waterCircle.offsetHeight,
				ctx = waterCircle.getContext('2d');
			let A = 6, W = 1 / 30, Q = 0, H = 100, y;
			function draw() {
				ctx.clearRect(0, 0, width, height);
				ctx.beginPath();
				ctx.strokeStyle = "#009688";
				ctx.lineWidth = 1;
				ctx.fillStyle="#009688";
				ctx.moveTo(0, A * Math.sin(Q) + H);
				for (let x = 1; x <= width; x++) {
					y = A * Math.sin(W * x + Q) + H;
					ctx.lineTo(x, y);
				}
				ctx.lineTo(width, height);
				ctx.lineTo(0, height);
				ctx.fill();
				ctx.closePath();
				Q -= 0.1;
				window.requestAnimationFrame(draw);
			}
			window.onload = function(){
				draw();
			}
		</script>
	</body>
</html>

如有问题，欢迎随时指正。

标签：canvas,水波,ctx,height,width,009688,waterCircle,绘制
来源： https://blog.csdn.net/QingQiang8808/article/details/113584375