HTML5 Canvas 繪圖－使用 Canvas 繪製圖形圖文教學 使用html5 canvas 繪製精美的圖_html5教學技巧

HTML5火的正熱，最近有個想法也是要用到HTML的相關功能，所以也要好好學習一把。

好好看了一下Canvas的功能，感覺HTML5在客戶端互動的功能性越來越強了，今天看了一下Canvas繪圖，下邊是幾個實例，記下以備後用。

1、使用Canvas繪製直線：

 

XML/HTML Code複製內容到剪貼簿

1. html>  
2. html>  
3.     頭>  
4.         元 元 字元 字元8"
5. >       頭
6. >      樣式 類型>
  
        畫布{border:dashed 2px #CCC}   
8.     樣式>
  
9.     腳本 類型 類型 型
10. >  
11.         函數 $$(id){   
12.             return document.getElementById(id);   
13.         }   
14.         函數 pageLoad(){                var 
15. 可 = $$('can'); 可以 = $$('can'); 鎠            var 
可
16. 罐子可以
17. 罐子
            cans.moveTo(20,30);//第一個起點   
            cans.lineTo(120,90);//第二點   
19.             cans.lineTo(220,60);//第三點（以第二點為起點）                cans.lineWidth
=            cans.行程樣式 = '              罐頭.中風();   
20.         }  
21.     script>  
22.     body onload onload onload
23. > ;">           canvas id id idid width="400px" "300px">
4
24. canvas>  
    
25. 身體>  

html

>

  

這裡用到的兩個API方法，moveTo和lineTo分別是線段的起點和終點座標，變數為（X座標,Y座標）,strokeStyle、stroke分別路徑繪製樣式和繪製路徑。

2、繪製漸層線條

漸層線條就是顏色有漸層的效果，當然漸層的樣式可以遵循路徑的方向也可以不遵循路徑的方向： XML/HTML Code複製內容到剪貼簿

1. html>  
2. html>  
3.     頭>  
4.         元 元 字元 字元8"
5. >       頭
6. >      樣式 類型>
  
        畫布{border:dashed 2px #CCC}   
8.     樣式>
  
9.     腳本 類型 類型 型
10. >  
11.         函數 $$(id){   
12.             return document.getElementById(id);   
13.         }   
14.         函數 pageLoad(){                var 
15. 可 = $$('can'); 可以 = $$('can'); 鎠            var 
可
16. 罐子可以
17. 罐子
            cans.moveTo(0,0);   
18.             cans.lineTo(400,300);                var gnt1
 = 
19. 變化的起止座標  
20.             gnt1.addColorStop(0,'red');//創建變換的開始顏色，0表示偏移量，個人理解為直線上的相對位置，最大為1，一個變換中可寫出任何個漸層顏色  
21.             gnt1.addColorStop(1,'黃色');                cans.lineWidth=            
22. cans.行程樣式 = gnt1             罐頭.中風();            }  
23.     script>  
24.     body onload onload onload
25. > ;">           canvas id id idid width="400px" "300px">
4
26. canvas>  
    
27. 身體>  

html

>

  

3、繪製長方形或正方形：

這種矩形框如果使用HTML4只能使用後台程式碼才能產生了，現在HTML5提供的Canvas功能卻很容易就能繪製，所以說HTML5的優越性是相當高的。 XML/HTML Code複製內容到剪貼簿

1. html>  
2. html>  
3.     頭>  
4.         元 元 字元 字元8"
5. >       頭
6. >      樣式 類型>
  
        畫布{border:dashed 2px #CCC}   
8.     樣式>
  
9.     腳本 類型 類型 型
10. >  
11.         函數 $$(id){   
12.             return document.getElementById(id);   
13.         }   
14.         函數 pageLoad(){                var 
15. 可 = $$('can'); 可以 = $$('can'); 鎠            var 
可
16. 罐子可以罐子             cans.fillStyle
 = 
18.             cans.fillRect(30,30,340,240);   
19.         }        腳本>
20.        body onload onload
 
21. onloadonload ;">           畫布 可以 idid 寬度="400px" 高
 
22. 高 >"300px">4
畫布
23. >        
身體

>

   html>  

這裡使用了一個方法－fillRect（）從字面上也能知道這個就是填滿一個矩形，這裡的參數值得說明一下fillRect(X,Y,Width,Height)，這個和數學裡的座標是不一樣的，具體請看

這裡的X，Y是相對Canvas左上角的起點開始的，謹記！ ！

4、繪製一個簡單的長方形框

上例中講到要繪製一個矩形塊，填滿了顏色，這個例子只是簡單地繪製一個矩形而不實現填充效果。

XML/HTML Code複製內容到剪貼簿

1. html>  
2. html>  
3.     頭>  
4.         元 元 字元 字元8"
5. >       頭
6. >      樣式 類型>
  
        畫布{border:dashed 2px #CCC}   
8.     樣式>
  
9.     腳本 類型 類型 型
10. >  
11.         函數 $$(id){   
12.             return document.getElementById(id);   
13.         }   
14.         函數 pageLoad(){                var 
15. 可 = $$('can'); 可以 = $$('can'); 鎠            var 
可
16. 罐子可以罐子             cans.行程樣式
 = 
17. '
            cans.StrongRect(30,30,340,240);   
        }   
19.     腳本>
  
20.     body onload onload 
21. onloadonload ;">           畫布 可以 idid 寬度="400px" 高 
22. 高 >"300px">4畫布
23. >        身體
24. >  

html>     

這個很簡單，和上例一樣，就是將fill替換成了stroke，具體詳見上例。

 5、繪製線性漸變的長方形

漸層是填滿的一種相當不錯的效果，結合實例2和實例3，我們可以創建一個漸變的矩形

XML/HTML Code複製內容到剪貼簿

1. html>  
2. html>  
3.     頭>  
4.         元 元 字元 字元8"
5. >       頭
6. >      樣式 類型>
  
        畫布{border:dashed 2px #CCC}   
8.     樣式>
  
9.     腳本 類型 類型 型
10. >  
11.         函數 $$(id){   
12.             return document.getElementById(id);   
13.         }   
14.         函數 pageLoad(){                var 
15. 可 = $$('can'); 可以 = $$('can'); 鎠            var 
可
16. 罐子可以罐子             var gnt1
 = 
17. 罐頭 
18.             gnt1.addColorStop(0,'紅色');   
19.             gnt1.addColorStop(0.5,'綠色');   
20.             gnt1.addColorStop(1,'藍色');                cans.fillStyle = 
21.             cans.fillRect(10,10,380,280);   
22.         }  
23.     script>  
24.     body onload onload onload
25. > ;">           canvas id id idid width="400px" "300px">
4
26. canvas>  
    
27. 身體>  

html

>

  

  

不解釋了，記住fillRect（X,Y,Width,Height）就行了。

6、填充一個圓形

圓形的用途很廣，當然也包含了橢圓。 XML/HTML Code複製內容到剪貼簿

1. html>  
2. html>  
3.     頭>  
4.         元 元 字元 字元8"
5. >       頭
6. >      樣式 類型>
  
        畫布{border:dashed 2px #CCC}   
8.     樣式>
  
9.     腳本 類型 類型 型
10. >  
11.         函數 $$(id){   
12.             return document.getElementById(id);   
13.         }   
14.         函數 pageLoad(){                var 
15. 可 = $$('can'); 可以 = $$('can'); 鎠            var 
可
16. 罐子可以
17. 罐子
            cans.beginPath();   
            cans.arc(200,150,100,0,Math.PI*2,true);   
19.             cans.closePath();                cans.fillStyle
 = 
20. 使用紅色應用程式🎜>看，傻眼了，怕上街被愛國者打啊，其實你懂的~~   
21.             cans.fill();            }  
22.     script>  
23.     body onload onload onload
24. > ;">           canvas id id idid width="400px" "300px">
4
25. canvas>  
    
26. 身體>  

html

>

  

  

這裡的arc方法的用法是arc(X,Y,Radius,startAngle,endAngle,anticlockwise),意思是（圓心X座標，圓心Y座標，半徑，開始角度（弧度），結束角度弧度，是否按照順時針畫）； arc中各參數比較：

a、cans.arc(200,150,100,0,Math.PI,true);

c、cans.arc(200,150,100,0,Math.PI/2,true);

c、cans.arc(200,150,100,0,Math.PI/2,true);

d、cans.arc(200,150,100,0,Math.PI/2,false);

 

 7、圓形區塊

  XML/HTML Code複製內容到剪貼簿

1. html>  
2. html>  
3.     頭>  
4.         元 元 字元 字元8"
5. >       頭
6. >      樣式 類型>
  
        畫布{border:dashed 2px #CCC}   
8.     樣式>
  
9.     腳本 類型 類型 型
10. >  
11.         函數 $$(id){   
12.             return document.getElementById(id);   
13.         }   
14.         函數 pageLoad(){                var 
15. 可 = $$('can'); 可以 = $$('can'); 鎠            var 
可
16. 罐子可以
17. 罐子
            cans.beginPath();   
            cans.arc(200,150,100,0,Math.PI*2,false);   
19.             cans.closePath();                cans.lineWidth
 = 
20.             cans.行程樣式 = '
             罐頭.中風();   
        }  
22.     script>  
23.     body onload onload onload
24. > ;">           canvas id id idid width="400px" "300px">
4
25. canvas>  
    
26. 身體>  

html

>

  

這裡不解釋了，和上邊的例子相同，lineWidth是控制線條的寬度的。

8、圓形漸層

  XML/HTML Code複製內容到剪貼簿

1. html>  
2. html>  
3.     頭>  
4.         元 元 字元 字元8"
5. >       頭
6. >      樣式 類型>
  
        畫布{border:dashed 2px #CCC}   
8.     樣式>
  
9.     腳本 類型 類型 型
10. >  
11.         函數 $$(id){   
12.             return document.getElementById(id);   
13.         }   
14.         函數 pageLoad(){                var 
15. 可 = $$('can'); 可以 = $$('can'); 鎠            var 
可
16. 罐子可以罐子             var gnt
 = 
17. 罐頭
18.             gnt.addColorStop(1,'red');   
19.             gnt.addColorStop(0,'綠色');                cans.fillStyle = 
20.             cans.fillRect(0,0,800,600);   
21.         }  
22.     script>  
23.     body onload onload onload
24. > ;">           canvas id id idid width="800px" "600px">
4
25. canvas>canvas>
can幕> 🎜>
26.     身體>  

html

>

  

這裡需要說明的是createRadialGradient方法，參數有（Xstart,Ystart,radiusStart,XEnd,YEnd,radiusEnd），也就是說，它在實行漸變時，使用了兩個圓，一個是原始的圓，一個是漸層式圓，其實，這種透過座標與半徑控制的方式可以實現很多樣式，像是

立體圓

1.   XML/HTML Code複製內容到剪貼簿
2. var 
3. gnt = 

cans

.createRadialGrad,00,050,020 gnt.addColorStop(0,'red');    gnt.addColorStop(1,'#333');