书小宅之网页设计——二次贝塞尔曲线和三次贝塞尔曲线

书小宅

已于 2022-07-13 10:27:23 修改

阅读量1.5k

点赞数 4

分类专栏：前端文章标签：贝塞尔曲线贝塞尔曲线的网页应用网页水波效果

于 2019-07-25 14:11:32 首次发布

本文链接：https://blog.csdn.net/qq_36447261/article/details/97107431

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

贝塞尔曲线起始点和终止点在曲线上，方向控制点不再曲线上。二次贝塞尔曲线有一个控制点，三次贝塞尔曲线有两个控制点。

二次贝塞尔曲线

定义和用法
quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。
二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么使用 beginPath() 和 moveTo() 方法来定义开始点。
在这里插入图片描述
开始点：
moveTo(20,20)
控制点：
quadraticCurveTo(20,100,200,20)
结束点：
quadraticCurveTo(20,100,200,20)

参数	描述
cpx	贝塞尔控制点的x坐标
cpy	贝塞尔控制点的y坐标
x	结束点的x坐标
y	结束点的y坐标

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初识贝塞尔曲线</title>
<style>
	#myc{display:block; margin :auto; border: 1px solid #777;}
</style>
</head>

<body>
<canvas id="myc" width="350" height="350" style="background-color:#CCC">您的浏览器不支持此功能</canvas>

<script>
var c=document.getElementById("myc");
var ctx=c.getContext("2d");
//x,y是起始点，w控制宽度，h控制高度
var x=20,y=250,w=255,h=200;
	ctx.beginPath();
	ctx.lineWidth=5;
	ctx.strokeStyle="#c00";
	//起始点
	ctx.moveTo(x,y);
	//传入控制方向点和结束点坐标参数
    ctx.quadraticCurveTo(x+w/2,y-h,x+w,y);
	ctx.stroke();
	ctx.beginPath();
	ctx.moveTo(x,y);
	ctx.lineWidth=2;
	ctx.strokeStyle="black";
	ctx.lineTo(x+w/2,y-h);
	ctx.stroke();
	ctx.font="16px arial";
	ctx.fillText("(x,y)",x,y);
	ctx.fillText("(x+w/2,y-h)",x+w/2,y-h);
	ctx.fillText("(x+w,y)",x+w,y);
</script>
</body>
</html>

在这里插入图片描述

使用二次贝塞尔曲线绘制笑脸

定义和用法
bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。

三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
在这里插入图片描述
开始点：
moveTo(20,20)
控制点 1：
bezierCurveTo(20,100,200,100,200,20)
控制点 2：
bezierCurveTo(20,100,200,100,200,20)
结束点：
bezierCurveTo(20,100,200,100,200,20)

参数	描述
cp1x	第一个贝塞尔曲线控制点的x坐标
cp1y	第一个贝塞尔曲线控制点的y坐标
cp2x	第二个贝塞尔曲线控制点的x坐标
cp2x	第二个贝塞尔曲线控制点的y坐标
x	结束点的x坐标
y	结束点的y坐标

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用二次贝塞尔曲线绘制笑脸</title>
<style>
	#myc{ddisplay:block; margin :auto; background-color:#6FF}
</style>
</head>

<body>
<canvas id="myc" width="400" height="400">您的浏览器不支持此功能</canvas>

<script>
var c=document.getElementById("myc");
var ctx=c.getContext("2d");
//x,y是起始点，w控制宽度，h控制高度
var x=50,y=210,w=100,h=50;
	//第一只眼睛
	ctx.beginPath();
	ctx.moveTo(x,y);
	ctx.quadraticCurveTo(x+w/2,y-h,x+w,y);
	ctx.stroke();
	
	var x1=x+w+80;
	//第二只眼睛
	ctx.beginPath(x1,y);
	ctx.moveTo(x1,y);
	ctx.quadraticCurveTo(x1+w/2,y-h,x1+w,y);
	ctx.stroke();
	
	var x2=x+w/2+40,y2=y+100;
	//嘴巴
	ctx.beginPath();
	ctx.moveTo(x2,y2);
	ctx.quadraticCurveTo(x2+w/2,y2+h,x2+w,y2);
	ctx.stroke();
	
	//脸
	ctx.beginPath();
	ctx.arc(x2+w/2,y2-70,150,0,2*Math.PI);
	ctx.stroke();
</script>
</body>
</html>

在这里插入图片描述

使用三次贝塞尔曲线绘制流动的水波动画

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用三次贝塞尔曲线绘制流动的水波动画</title>
<style>
	#myc{ddisplay:block; margin :auto; background-color:#FFFFFF}
</style>
</head>

<body>
<canvas id="myc" width="400" height="400">您的浏览器不支持此功能</canvas>

<script>
var c=document.getElementById("myc");
var ctx=c.getContext("2d");
//x,y是起始点，w控制宽度，h控制高度
var x=0,y=210,w=200,h=50,dy=210;
	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();
		
		//渐变色
		var cl=ctx.createLinearGradient(0,c.height,w+x
		,0);
		cl.addColorStop(0,"#6CF");
		cl.addColorStop(1,"#36C");
		ctx.fillStyle=cl;
		ctx.fill();
		
		x-=5;
		if(x<=-2*w){
			x=0;
		}
		//浏览器提供的与动画相关的回调函数
		requestAnimationFrame(wave);	
	}
	wave();
</script>
</body>
</html>