具體代碼如下：
- context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
案例的JavaScript代碼：
- window.onload = function(){
- var canvas = document.getElementById("myCanvas");
- var context = canvas.getContext("2d");
- context.moveTo(188, 130);
- var controlX1 = 140;
- var controlY1 = 10;
- var controlX2 = 388;
- var controlY2 = 10;
- var endX = 388;
- var endY = 170;
- context.bezierCurveTo(controlX1, controlY1, controlX2
- controlY2, endX, endY);
- context.lineWidth = 10;
- context.strokeStyle = "black"; // line color
- context.stroke();
- };
關于為什么要使用這些代碼，我們用一張圖片來解釋一下：
貝塞爾曲線的定義是由當前的上下文和兩個控制點以及結束點控制的。曲線的第一部分是切向的假想線，是由上下文點和第一個控制點定義。第二部分的曲線相切的假想線，是第二個控制點和結束點定義。
轉自我愛貓貓技術博客
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。