HTML5實戰—canvas繪圖之貝塞爾曲線

本文轉載自查看原文 2012-10-15 21:53 16472 canvas/ HTML5

1、二次貝塞爾曲線

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

數學公式表示如下：

二次方貝茲曲線的路徑由給定點P₀、P₁、P₂的函數B（t）追蹤：

$\mathbf{B}(t) = (1 - t)^{2}\mathbf{P}_0 + 2t(1 - t)\mathbf{P}_1 + t^{2}\mathbf{P}_2 \mbox{ , } t \in [0,1]$

代碼實例：

<!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, h1{margin:0;}
    canvas{margin: 20px;}
</style>
</head>
<body onload="draw()">
    <h1>二次貝塞爾曲線</h1>
    <canvas id="canvas" width=200 height=200 style="border: 1px solid #ccc;"></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();            

          //繪制2次貝塞爾曲線  
          context.beginPath();  
          context.moveTo(20,170);  
          context.quadraticCurveTo(130,40,180,150); 
          context.strokeStyle = "red"; 
          context.stroke();          
}
</script>
</body>
</html>

代碼效果：

2、三次貝塞爾曲線

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

數學公式表示如下：

P₀、P₁、P₂、P₃四個點在平面或在三維空間中定義了三次方貝茲曲線。曲線起始於P₀走向P₁，並從P₂的方向來到P₃。一般不會經過P₁或P₂；這兩個點只是在那里提供方向資訊。P₀和P₁之間的間距，決定了曲線在轉而趨進P₃之前，走向P₂方向的“長度有多長”。

$\mathbf{B}(t)=\mathbf{P}_0(1-t)^3+3\mathbf{P}_1t(1-t)^2+3\mathbf{P}_2t^2(1-t)+\mathbf{P}_3t^3 \mbox{ , } t \in [0,1]$

代碼實例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas直線</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
    body, h1{margin:0;}
    canvas{margin: 20px; }
</style>
</head>
<body onload="draw()">
    <h1>三次貝塞爾曲線</h1>
    <canvas id="canvas" width=200 height=200 style="border: 1px solid #ccc;"></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();  

       //繪制3次貝塞爾曲線        
       context.beginPath();  
       context.moveTo(25,175);  
       context.bezierCurveTo(60,80,150,30,170,150);  
       context.strokeStyle = "red";  
       context.stroke();  
}
</script>
</body>
</html>

代碼效果圖：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 用html5的canvas畫布繪制貝塞爾曲線 canvas繪制貝塞爾曲線 Canvas中繪制貝塞爾曲線 canvas貝塞爾曲線效果演示貝塞爾曲線貝塞爾曲線 JavaScript+canvas 利用貝塞爾曲線繪制曲線 [js高手之路] html5 canvas系列教程 - arcTo(弧度與二次,三次貝塞爾曲線以及在線工具) 手指繪圖（貝塞爾曲線）貝塞爾曲線與CSS3動畫、SVG和canvas的應用