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

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

二次贝塞尔曲线

定义和用法
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>