canvas绘制水波球

最新推荐文章于 2023-11-26 01:39:17 发布

2022再出发

最新推荐文章于 2023-11-26 01:39:17 发布

阅读量561

点赞数 1

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/QingQiang8808/article/details/113584375

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

利用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>

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

2022再出发

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
canvas绘制水波球

利用canvas绘制水波球，效果图如下：前端代码如下：<!DOCTYPE HTML><html> <head> <meta charset="utf8"> <title>水波</title> <style type="text/css"> * { padding: 0; margin: 0; border: 0; } html, body {
复制链接

扫一扫