貝塞爾實例

時間 2019-11-13

標籤實例简体版

原文原文鏈接

Bezier and quadratic curvescss

*1 quadraticCurveTo(cp1x, cp1y, x, y)：//cpx，cpy表示控制點的座標, x，y表示終點座標；html

數學公式表示以下：canvas

二次方貝茲曲線的路徑由給定點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]$

代碼實例：spa

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>canvas直線</title>
 6 <meta name="Keywords" content="">
 7 <meta name="author" content="@my_programmer">
 8 <style type="text/css">
 9     body, h1{margin:0;}
10     canvas{margin: 20px;}
11 </style>
12 </head>
13 <body onload="draw()">
14     <h1>二次貝塞爾曲線</h1>
15     <canvas id="canvas" width=200 height=200 style="border: 1px solid #ccc;"></canvas>
16 <script>
17     function draw() {
18         var canvas=document.getElementById('canvas');
19         var context=canvas.getContext('2d');
20          //繪製起始點、控制點、終點  
21           context.beginPath();  
22           context.moveTo(20,170);  
23           context.lineTo(130,40);  
24           context.lineTo(180,150);    
25           context.stroke();            
26 
27           //繪製2次貝塞爾曲線  
28           context.beginPath();  
29           context.moveTo(20,170);  
30           context.quadraticCurveTo(130,40,180,150); 
31           context.strokeStyle = "red"; 
32           context.stroke();          
33 }
34 </script>
35 </body>
36 </html>

代碼效果：3d

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

數學公式表示以下：htm

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

$\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]$

代碼實例：ip

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>canvas直線</title>
 6 <meta name="Keywords" content="">
 7 <meta name="Description" content="">
 8 <style type="text/css">
 9     body, h1{margin:0;}
10     canvas{margin: 20px; }
11 </style>
12 </head>
13 <body onload="draw()">
14     <h1>三次貝塞爾曲線</h1>
15     <canvas id="canvas" width=200 height=200 style="border: 1px solid #ccc;"></canvas>
16 <script>
17     function draw() {
18         var canvas=document.getElementById('canvas');
19         var context=canvas.getContext('2d');        
20        //繪製起始點、控制點、終點  
21        context.beginPath();  
22        context.moveTo(25,175);  
23        context.lineTo(60,80);  
24        context.lineTo(150,30);  
25        context.lineTo(170,150); 
26        context.stroke();  
27 
28        //繪製3次貝塞爾曲線        
29        context.beginPath();  
30        context.moveTo(25,175);  
31        context.bezierCurveTo(60,80,150,30,170,150);  
32        context.strokeStyle = "red";  
33        context.stroke();  
34 }
35 </script>
36 </body>
37 </html>

代碼效果圖：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。