在j中,提供了bezierCurveTo()方法,也就是利用起点,终点,两个控制点在canvas画贝塞尔曲线,首先,咱们通过moveTo函数将笔尖移动到曲线的起点,然后bezierCurveTo(控制点, 控制点, 终点)这样画出贝塞尔曲线.关于贝塞尔曲线的控制点,咱们可以大概看看这个图
其中A是曲线的起点,
D曲线的终点,
B和C是曲线的控制点,
将B和C连起来得到线段BC
BC上的点G从左到右移动,线段AB上的点F,和CD上的点H和G同比例移动,其中,F是从A->B,H是从C->D,将GF的点I,GH上的点J,连接起点,I和J上面的点E就是曲线上的切点.其中I,J,E在线段上的位置也是与G点同比例移动的.
比如说当BG/BC=1/10的时候
AF/AB=1/10 CH/CD=1/10 FI/FG=1/10 GJ/GH=1/10 IE/IJ=1/10
利用贝塞尔曲线画心形图:
首先,有些图形咱们很难用一条贝塞尔曲线来完成,咱们可以将几条贝塞尔曲线连接起来,这样就画出了我们想要的曲线
代码如下:
<!DOCTYPE html><html><body><canvas id="myCanvas" width="500" height="500" 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(300,100); ctx.bezierCurveTo(400,5,450,100,300,300); ctx.moveTo(300,100); ctx.bezierCurveTo(200,5,150,100,300,300); ctx.stroke();</script></body></html>效果图:
在上面的心形图中,两个曲线的交点在心尖尖上,所以就算转折比较突兀也没有关系,但是要是我们想要这样的曲线呢
两条曲线连接起来,我们肯定是希望连接点比较平滑,这样的话,断点取哪里比较好呢?我们选择在曲线最接近直线的地方差不多中点这样子作为断点,比如说
第二条曲线的第一个控制点控制点选择在第一条曲线的第二个控制点的切线方程上,比如说如果第一条曲线长这样
那么第二条曲线的第一个控制点咱们要选择CD直线上的点,这样的出来的曲线连接就比较平滑了
代码如下:
<!DOCTYPE html><html><body><canvas id="myCanvas" width="600" height="500" 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(100,100); ctx.bezierCurveTo(180,25,250,40,270,100); ctx.moveTo(270,100); ctx.bezierCurveTo(380,430,450,420,600,100); ctx.stroke();</script></body></html>