HTML5--使用三次贝塞尔曲线绘制水波动画

最新推荐文章于 2023-03-31 11:22:50 发布

飞鸿影梦

最新推荐文章于 2023-03-31 11:22:50 发布

阅读量460

点赞数

本文链接：https://blog.csdn.net/weixin_43379235/article/details/107284175

版权

1.定义及其用法
定义和用法
（1）bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。
（2）三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
2.效果展示
在这里插入图片描述
3代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三次贝塞尔曲线</title>
<style>
	#myc{background-color: aqua;display: block;margin: auto}
</style>
</head>

<body>
<canvas id="myc" width="400" height="400"></canvas>
<script>
	var c=document.getElementById("myc");
	var ctx=c.getContext("2d");
    var x=0,y=200,w=200,h=30,dy=200;
	
	function wave(){
	  ctx.clearRect(0,0,c.width,c.height);
	  ctx.beginPath();
	  ctx.moveTo(x,y);
	  ctx.bezierCurveTo(x+w/2,y-h,x+1.5*w,y+h,x+2*w,y);
	  var x1=x+w*2;
	  ctx.bezierCurveTo(x1+w/2,y-h,x1+1.5*w,y+h,x1+2*w,y);
	  ctx.stroke();
	  ctx.lineTo(x1+2*w,y+dy);
	  ctx.lineTo(x,y+dy);
	  ctx.closePath();
		ctx.fillStyle="#016Daa"
		ctx.fill()
	  x-=10;
	  if(x<=-2*w){
		  x=0
	  }
	  requestAnimationFrame(wave)
	}
	wave();
</script>
</body>
</html>

飞鸿影梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5--使用三次贝塞尔曲线绘制水波动画

1.定义及其用法定义和用法（1）bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。（2）三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。2.效果展示3代码<!doctype html><html><head><meta charse
复制链接

扫一扫