前端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>

原文链接：https://blog.csdn.net/QingQiang8808/article/details/113584375?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164818918516780255256223%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=164818918516780255256223&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_ecpm_v1~rank_v31_ecpm-3-113584375.142^v5pc_search_result_cache,143^v6register&utm_term=canvas%E7%BB%98%E5%88%B6%E7%90%83&spm=1018.2226.3001.4187

前端canvas绘制水波球

猜你喜欢