1 <!DOCTYPE html>
2 <html lang='zh-cn'>
3 <head>
4 <title>Insert you title</title>
5 <meta name='description' content='this is my page'>
6 <meta name='keywords' content='keyword1,keyword2,keyword3'>
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
8 <link rel='stylesheet' type='text/css' href='./css/index.css' />
9 <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
10 <style type='text/css'>
11 html,body,canvas { 12 margin: 0; padding: 0; 13 } 14
15 html { 16 background: #999; 17 } 18
19 #can { 20 background: #FFF; display: block; margin: 75px auto; border-radius: 2px; 21 } 22 </style>
23 <script type='text/javascript'>
24 $( function(){ 25 var oCan = $( '#can' ).get( 0 ).getContext( '2d' ); 26 oCan.beginPath(); 27 /*
28
29 繪制曲線(圓形曲線): 30 oCan.arcTo(x1,y1,x2,y2,r) W3C解釋 : 在畫布上創建介於兩個切線之間的弧： 起點坐標 1, 終點坐標 2, 半徑(調整半徑可達到不同效果) 31 這里有幾個問題需要解決: 32 一: 33 為什么在不設置 oCan.moveTo(),只設置oCan.arcTo()的時候,是畫不出來曲線的? 34 二: 35 為什么我們在設置的坐標點的時候,看不懂他是怎么畫出來這個圓呢? 36
37 繪制曲線二(弧形曲線): 38 oCan.quadraticCurveTo(); W3C 二次方曲線 (繪制一條二次貝塞爾曲線：) 39 定義和用法 40 quadraticCurveTo(dx,dy,x1,y1) 方法通過使用表示二次貝塞爾曲線的指定控制點，向當前路徑添加一個點。 dx,dy :控制點 x1,y1 結束坐標 41 提示：二次貝塞爾曲線需要兩個點。第一個點是用於二次貝塞爾計算中的控制點，第二個點是曲線的結束點。曲線的開始點是當前路徑中最后一個點。如果路徑不存在， 42 那么請使用 beginPath() 和 moveTo() 方法來定義開始點。 43
44 繪制曲線三(S型曲線): 45 定義和用法 46 bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1) 方法通過使用表示三次貝塞爾曲線的指定控制點，向當前路徑添加一個點。 dx,dy :控制點 x1,y1 結束坐標 47 提示：三次貝塞爾曲線需要三個點。前兩個點是用於三次貝塞爾計算中的控制點，第三個點是曲線的結束點。曲線的開始點是當前路徑中最后一個點。如果路徑不存在， 48 那么請使用 beginPath() 和 moveTo() 方法來定義開始點。 49
51 */
52 /*
53
54 // 使用arcTo來創建曲線 55 oCan.moveTo( 250 , 250 ); //創建開始點 56 oCan.arcTo( 100 , 300 , 50 , 150 , 50 ); 57 oCan.arc( 250 , 250 , 2 , 0 , 2 * Math.PI , true ); // 輔助 58 oCan.arc( 100 , 300 , 2 , 0 , 2 * Math.PI , true ); // 輔助 59 oCan.arc( 50 , 150 , 2 , 0 , 2 * Math.PI , true ); // 輔助 60 oCan.closePath(); 61 oCan.stroke(); 62
63 */
64
65 /*
66
67 // 使用quadraticCurveTo來創建曲線 68 oCan.moveTo( 250 , 250 ); /* 創建開始點 69 oCan.quadraticCurveTo( 100 , 300 , 50 , 150 ); // 畫出的曲線大小和控制點有直接關系,可以調整控制點的坐標來進行查看(曲線就是兩個切線之間的弧) 70 oCan.arc( 250 , 250 , 2 , 0 , 2 * Math.PI , true ); // 輔助 71 oCan.arc( 100 , 300 , 2 , 0 , 2 * Math.PI , true ); // 輔助 72 oCan.arc( 50 , 150 , 2 , 0 , 2 * Math.PI , true ); // 輔助 73 oCan.closePath(); 74 oCan.stroke(); 75
76 */
77
78 // 使用bezierCurveTo來創建曲線
79 oCan.moveTo( 250 , 250 ); // 創建開始點
80 oCan.bezierCurveTo( 150 , 300 , 450 , 350 , 50 , 500 ); 81 oCan.arc( 250 , 250 , 2 , 0 , 2 * Math.PI , true ); // 輔助
82 oCan.arc( 150 , 300 , 2 , 0 , 2 * Math.PI , true ); // 輔助
83 oCan.arc( 450 , 350 , 2 , 0 , 2 * Math.PI , true ); // 輔助
84 oCan.arc( 50 , 500 , 2 , 0 , 2 * Math.PI , true ); // 輔助
85 oCan.stroke(); 86 oCan.closePath(); 87 } ); 88 </script>
89 </head>
90 <body>
91 <canvas id='can' width='500' height='500'>您的瀏覽器版本過低,請升級您的瀏覽器...</canvas>
92 </body>
93 </html>
