使用HTML5 Canvas來繪製三角形和矩形等多邊形的方法_html5教程技巧

使用HTML5 Canvas繪製多邊形所需的CanvasRenderingContext2D物件的主要屬性和方法(有「()」者為方法)如下：

属性或方法	基本描述
strokeStyle	用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
globalAlpha	定义绘制内容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之间，默认值为1.0。
lineWidth	定义绘制线条的宽度。默认值是1.0，并且这个属性必须大于0.0。较宽的线条在路径上居中，每边各有线条宽的一半。
lineCap	指定线条两端的线帽如何绘制。合法的值是 butt、round和square。默认值是"butt"。
beginPath()	开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。
moveTo(int x, int y)	定义一个新的绘制路径的起点坐标
lineTo(int x, int y)	定义一个绘制路径的中间点坐标
stroke(int x, int y)	沿着绘制路径的坐标点顺序绘制直线
closePath()	如果当前的绘制路径是打开的，则闭合该绘制路径。

繪製三角形

JavaScript Code複製內容到剪貼簿

1. html>   
2.   
3.   
4. "UTF-8">   
5.   
6.   
7.   
8.   
9.   
10. "myCanvas" width="400px""400px" style="border: 1px solid red;">   
11. 您的瀏覽器不支援canvas標籤。   
12.   
13.   
14.   
16. //取得Canvas物件(畫布)   
17. var canvas = document.getElementById("myCanvas"
18. //簡單地偵測目前瀏覽器是否支援Canvas對象，以免在一些不支援html5的瀏覽器中提示語法錯誤   
19. if(canvas.getContext){     
20.     //取得對應的CanvasRenderingContext2D物件(畫筆)   
21.     var ctx = canvas.getContext(        
22.     
//開始一個新的繪圖路徑
23.        ctx.beginPath();   
24.     
//設定線顏色為藍色
25.        ctx.strokeStyle = 
"blue"
26. ;        
//設定路徑起點座標
27.        ctx.moveTo(20, 50);   
28.     
//繪製直線線段到座標點(60, 50)
29.        ctx.lineTo(20, 100);   
30.     
//繪製直線線段到座標點(60, 90)
31.        ctx.lineTo(70, 100);       
32.     
//先關閉繪圖路徑。請注意，此時將會使用直線連接目前端點和起始端點。
33.        ctx.closePath();   
34.     
//最後，依照繪圖路徑畫出直線
35.        ctx.stroke();   
36. }   
37.   
38.   
39.    
  

40. 對應的顯示效果如下：
    

    繪製矩形
    之所以將Canvas繪製矩形單獨提出來，是因為Canvas的畫筆工具——CanvasRenderingContext2D物件為繪製矩形提供了專用的方法。

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

    1. html>  
    2. html>  
    3. head>  
    4. meta charset="UTF-8 ">  
    5. title>HTML5 Canvas繪製長方形入門範例> title>  
    6. head>  
    7. body>  
    8.   
    9.   
    10. canvas id=id=id= width="400px" "300px" style="border: 1px solid red; >   您的瀏覽器不支援canvas標籤。  
    11. canvas>  
    12.   
    13. script type=type=type=>
    14.   
    15. //取得Canvas物件(畫布)    var canvas = document
    16. //單純偵測目前瀏覽器是否支援Canvas對象，以免在一些不支援html5的瀏覽器中提示語法錯誤   
    17. if(canvas.getContext){     
    18.     //取得對應的CanvasRenderingContext2D物件(畫筆)   
    19.     var ctx = canvas.
    20.        
    21.     //開始一個新的繪製路徑   
    22.     ctx.beginPath();   
    23.     //設定線顏色為藍色   
    24.     ctx.strokeStyle = "blue"     //以canvas中的座標點(10,10)作為繪製起始點，繪製寬度為80px、高度50px的長方形   
    25.     ctx.rect(10, 10, 80, 50);   
    26.     //依照指定的路徑繪製直線   
    27.     ctx.stroke();   
    28.     //關閉繪製路徑   
    29.     ctx.closePath();   
    30. }   
    32. script>  
    33. body>  
    34. html>  

    對應的矩形效果顯示如下：