HTML 贝塞尔曲线

1.二次贝塞尔曲线

 

<canvas >

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)

文章纯属笔记,如有雷同,纯属巧合

以上就是HTML 贝塞尔曲线的详细内容，更多关于HTML 贝塞尔曲线的资料请关注九品源码其它相关文章！