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>