HTML 贝塞尔曲线

1.二次贝塞尔曲线

 

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.

</canvas>

 

<script>

 

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.moveTo(20,20);

ctx.quadraticCurveTo(20,100,200,20);

ctx.stroke();

 

</script> 

 

• 开始点：moveTo(20,20)
• 控制点：quadraticCurveTo(20,100,200,20)
• 结束点：quadraticCurveTo(20,100,200,20)

 

<script>

 

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.moveTo(20,20);

ctx.bezierCurveTo(20,100,200,100,200,50);

ctx.stroke();

 

</script> 

 

• 开始点：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)