html5--5-5 繪制填充矩形
學習要點
- 掌握繪制矩形的方法：strkeRect()/fillRect()
- 掌握繪制路徑的 beginPath()和closePath()
矩形的繪制方法
- rect(x,y,w,h)創建一個矩形
- strokeRect(x,y,w,hx,y,w,h) 繪制矩形（無填充）
- fillRect(x,y,w,h) 繪制"被填充"的矩形
- stroke() 繪制已定義的路徑
- fill()繪制一個實心的（帶填充的圖形）
Canvas的路徑方法
- moveTo() 定義繪制路徑的起點(在直線中就是定義直線的起點)
- lineTo() 添加一個新點，(在我們的直線案例中就是定義直線的終點，但是后邊繼續繪制的話，它就變成中間點)
- stroke() 繪制已定義的路徑
- fill()繪制一個實心的（帶填充的圖形）
- beginPath() 用來創建新的路徑
- closePath() 從當前點回到起始點的來封閉路徑
繪制直線段流程:
- 在HTML5文檔中添加canvas元素，並且設置的寬高和ID
- 在canvas元素中添加提示語句，讓不支持canvas的瀏覽器能夠顯示友好的提示語句
- 添加script元素
- 獲取畫布/設置繪圖繪圖環境：此為固定語句，暫時記住、了解即可，后續課程還會繼續講解
- 指定線寬:lineWidth= 數值
- 指定顏色：strokeStyle=顏色值（只適用用輪廓，線段等，填充色用：fillStyle=顏色值
- 設定起點：moveTo(x坐標,y坐標)
- 設定終點：lineTo(x坐標,y坐標)
- 開始繪制：stroke()
繪制矩形流程：
- 在HTML5文檔中添加canvas元素，並且設置的寬高和ID
- 在canvas元素中添加提示語句，讓不支持canvas的瀏覽器能夠顯示友好的提示語句
- 添加script元素
- 獲取畫布/設置繪圖繪圖環境：此為固定語句，暫時記住、了解即可，后續課程還會繼續講解
- 繪制空心矩形
- 指定線寬:lineWidth= 數值
- 指定輪廓顏色：strokeStyle=顏色值（只適用用輪廓，線段等，填充色用：fillStyle=顏色值
- 設定矩形的基本參數：strokeRect(x,y;width,height)
- 繪制填充矩形
- 指定填充顏色：fillStyle=顏色值（只適用用輪廓，線段等，填充色用：fillStyle=顏色值
- 設定矩形的基本參數：fillRect(x,y;width,height)
實例
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>無標題文檔</title> 6 </head> 7 8 <body> 9 </body> 10 </html><!DOCTYPE html> 11 <html lang="en"> 12 <head> 13 <meta charset="UTF-8"> 14 <title>Document</title> 15 <style type="text/css"> 16 canvas{background: #A9A9A0} 17 </style> 18 </head> 19 <body> 20 <canvas id="mycanvas" width="500px" height="300"> 21 您的瀏覽器暫不支持HTML5的canvas元素！！ 22 </canvas> 23 <script type="text/javascript"> 24 //定義變量獲取畫布DOM 25 var canvas=document.getElementById("mycanvas"); 26 //設置繪畫環境為2d 27 var context=canvas.getContext("2d"); 28 // //設置線寬 29 // context.lineWidth=10; 30 // //設置顏色 31 // context.strokeStyle="#FF0000"; 32 // //用moveto設置起點 33 // context.moveTo(10,10); 34 // //用lineTo設置終點 35 // context.lineTo(100,100); 36 // context.lineTo(100,200); 37 // context.lineTo(200,200); 38 // context.lineTo(300,100); 39 // context.lineTo(10,10); 40 // //開始畫線 41 // context.stroke(); 42 43 //2、這是用rect+stroke繪制矩形 44 context.beginPath(); 45 context.lineWidth=5; 46 context.strokeStyle="#FFFF00"; 47 context.rect(350,50,100,50); 48 context.stroke(); 49 50 //3、這是用strokeRect繪制圖形 51 context.beginPath(); 52 context.strokeStyle="#00FFFF"; 53 context.strokeRect(50,50,100,50); 54 55 //4、這是用fillRect繪制矩形，顏色添加的時候是fillStyle 56 context.beginPath(); 57 context.fillStyle="#00FFFF"; 58 context.fillRect(200,50,100,50); 59 60 </script> 61 </body> 62 </html>