溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何使用canvas繪制貝塞爾曲線

發(fā)布時間：2021-09-15 09:39:12 來源：億速云 閱讀：221 作者：柒染 欄目：web開發(fā)

今天就跟大家聊聊有關(guān)如何使用canvas繪制貝塞爾曲線，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

1、二次貝塞爾曲線

　　quadraticCurveTo(cpx,cpy,x,y)　　//cpx，cpy表示控制點的坐標(biāo),x，y表示終點坐標(biāo)；

數(shù)學(xué)公式表示如下：

二次方貝茲曲線的路徑由給定點P0、P1、P2的函數(shù)B（t）追蹤：

如何使用canvas繪制貝塞爾曲線

如何使用canvas繪制貝塞爾曲線

代碼實例：

代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas直線</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
<style type="text/css">
    body, h2{margin:0;}
    canvas{margin: 20px;}
</style>
</head>
<body onload="draw()">
    <h2>二次貝塞爾曲線</h2>
    <canvas id="canvas" width=200 height=200 ></canvas>
<script>
    function draw() {
        var canvas=document.getElementById('canvas');
        var context=canvas.getContext('2d');
         //繪制起始點、控制點、終點  
          context.beginPath();  
          context.moveTo(20,170);  
          context.lineTo(130,40);  
          context.lineTo(180,150);    
          context.stroke();            </p>
<p>          //繪制2次貝塞爾曲線  
          context.beginPath();  
          context.moveTo(20,170);  
          context.quadraticCurveTo(130,40,180,150); 
          context.strokeStyle = "red"; 
          context.stroke();          
}
</script>
</body>
</html>

代碼效果：

如何使用canvas繪制貝塞爾曲線

2、三次貝塞爾曲線

　　bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)　　//cp1x，cp1y表示第一個控制點的坐標(biāo),cp2x，cp2y表示第二個控制點的坐標(biāo),x，y表示終點的坐標(biāo)；

數(shù)學(xué)公式表示如下：

P0、P1、P2、P3四個點在平面或在三維空間中定義了三次方貝茲曲線。曲線起始于P0走向P1，并從P2的方向來到P3。一般不會經(jīng)過P1或P2；這兩個點只是在那里提供方向資訊。P0和P1之間的間距，決定了曲線在轉(zhuǎn)而趨進P3之前，走向P2方向的“長度有多長”。

如何使用canvas繪制貝塞爾曲線

如何使用canvas繪制貝塞爾曲線

代碼實例：

代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas直線</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
    body, h2{margin:0;}
    canvas{margin: 20px; }
</style>
</head>
<body onload="draw()">
    <h2>三次貝塞爾曲線</h2>
    <canvas id="canvas" width=200 height=200 ></canvas>
<script>
    function draw() {
        var canvas=document.getElementById('canvas');
        var context=canvas.getContext('2d');        
       //繪制起始點、控制點、終點  
       context.beginPath();  
       context.moveTo(25,175);  
       context.lineTo(60,80);  
       context.lineTo(150,30);  
       context.lineTo(170,150); 
       context.stroke();  </p>
<p>       //繪制3次貝塞爾曲線        
       context.beginPath();  
       context.moveTo(25,175);  
       context.bezierCurveTo(60,80,150,30,170,150);  
       context.strokeStyle = "red";  
       context.stroke();  
}
</script>
</body>
</html>

代碼效果圖：

如何使用canvas繪制貝塞爾曲線

是不是很炫酷的效果。HTML5+canvas真是個好玩的東西。

看完上述內(nèi)容，你們對如何使用canvas繪制貝塞爾曲線有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手