首頁 > 開發者 > JavaScript
標籤：布局 rom lib html 如何使用 pat lin microsoft 矩形
在頁面中添加canvas元素會在頁面上產生一個矩形的位元影像畫布，可以使用JavaScript在畫布上即時繪製圖形映像。在繪製圖形時，需要先調用畫布的getContext函數擷取與該畫布相關的用於繪製圖形（如2D圖形、3D圖形）的對象，然後使用這個對象調用不同的圖形函數來繪製相應的圖形。下面分別介紹2D圖形中幾種常見圖形的繪製方法。
（1）直線
在繪製直線時，先使用moveTo(x,y)函數設定直線的起始點，參數x和y表示起始點的橫座標和縱座標，以像素為單位，接著通過lineTo(x, y) 函數設定直線的終點，參數x和y表示終點的橫座標和縱座標，也以像素為單位，最後調用stroke函數繪製直線。下面給出一段繪製直線的範例程式碼：
//擷取相應的畫布
var canvasObject = document.getElementById("canvasID");
//擷取用於繪製2D圖形的對象
var contextObject = canvasObject.getContext("2d");
contextObject.strokeStyle = "rgb(0, 162, 232)"; //設定線條顏色
contextObject.moveTo(28, 20); //設定直線的起點
contextObject.lineTo(78, 50); //設定終點
contextObject.stroke(); //畫直線
上面的代碼首先以"canvasID"為參數調用document對象的getElementById函數從相應的頁面中尋找id屬性值為canvasID的畫布對象，並賦值給canvasObject變數，通過變數canvasObject調用畫布對象的getContext函數擷取與該畫布有關的用於繪製2D圖形的對象，並賦值給contextObject變數；接著通過contextObject變數調用strokeStyle屬性來設定線條的顏色，並調用moveTo和lineTo函數分別設定直線的起點和終點；最後調用stroke函數繪製直線。
（2）矩形
可以使用fillRect(x, y, width, height)函數繪製帶有背景色的矩形，也可以使用strokeRect(x, y, width, height)函數僅繪製矩形的輪廓，其中參數x和y用來設定矩形在畫布上的位置，它們是相對於畫布的左上方的，width和height 分別表示矩形的寬度和高度，以像素為單位。使用fillRect函數繪製矩形時，可以通過fillStyle屬性設定填充顏色，該屬性的顏色值可以是 RGB、預定義的顏色（如red紅色、blue藍色等）、十六進位顏色或者漸層色；使用strokeRect函數繪製矩形時，可以通過strokeStyle屬性設定線條的顏色，顏色的取值方法與fillStyle屬性相同。
（3）多邊形
多邊形（如三角形、四邊形等）是通過繪製多條直線組合成的。在繪製多邊形時，先使用moveTo函數在畫布上設定一個起始點，然後根據多邊形的邊數多次使用lineTo函數畫出多條首尾相接的直線來組合成多邊形。
（4）圓形
可以使用arc(x, y, radius, startAngle, endAngle, anticlockwise)函數繪製圓形，其中參數x和y表示圓心的座標，x是橫座標，y是縱座標，都以像素為單位；radius表示圓的半徑，startAngle和endAngle表示圓弧的起始弧度和終止弧度；anticlockwise的資料類型是BOOL類型，當取值為true時，會沿著逆時針方向繪製圓，否則將沿著順時針方向繪製。
介紹了常見圖形的繪製方法後，下面以一個應用程式為例示範如何使用JavaScript在畫布上繪製這些圖形。建立一個JavaScript的Windows市集的空白應用程式項目，將其命名為DrawGraphApplication。開啟default.html檔案，在body元素中添加一個canvas元素，為了便於檢索控制項，設定畫布的id屬性值為canvasID。相應的HTML程式碼片段如下所示：
<body>
<canvas id="canvasID" width="400" height="320"></canvas>
</body>
為了控制畫布在應用程式介面上的顯示外觀，在default.css檔案中添加如下代碼來控制畫布的布局。
/*設定畫布的背景色和在應用程式介面上的顯示位置*/
#canvasID {
background-color: gray;
margin-left: 20px;
margin-top: 20px;
}
隨後雙擊開啟default.js檔案，在"args.setPromise(WinJS.UI.processAll());"語句後先添加如下代碼來獲得畫布並擷取與該畫布相關的用於繪製2D圖形的對象。
//擷取相應的畫布
var canvasObject = document.getElementById("canvasID");
//從該畫布中得到用於繪製2D圖形的對象
var contextObject = canvasObject.getContext("2d");
//設定所有圖形的線條顏色為白色
contextObject.strokeStyle = "rgb(255,255,255)";
//設定所有圖形的線條寬度為2像素
contextObject.lineWidth = 2;
在上面的代碼中，以"canvasID"為參數調用document對象的getElementById函數尋找id屬性值為canvasID的畫布對象，並賦值給canvasObject變數，然後通過變數canvasObject調用畫布對象的getContext函數擷取與該畫布有關的用於繪製2D圖形的對象，並賦值給contextObject變數，接著通過contextObject變數調用用於繪製2D圖形的對象的strokeStyle屬性來設定所有圖形的線條顏色為白色，並通過lineWidth屬性設定所有圖形的線條寬度為2像素。
緊接著依次添加繪製直線、矩形、三角形、圓形、六邊形和填充正方形的代碼，下面來分別介紹繪製每種圖形的代碼。繪製直線的JavaScript程式碼片段如下所示：
//繪製一條直線
contextObject.beginPath(); //重新設定繪圖路徑
//直線的起點
contextObject.moveTo(100, 50);
//調用lineTo函數設定終點
contextObject.lineTo(30, 120);
contextObject.stroke();
上面的代碼首先通過contextObject變數調用beginPath函數重新設定繪圖路徑，然後通過moveTo函數設定開始點的x軸座標為100像素、y軸座標為50像素，並調用lineTo函數設定直線終點的x軸座標為30像素、y軸座標為120像素，最後調用stroke函數繪製直線。
在繪製矩形時，也是先調用beginPath函數重新設定繪圖路徑，接著調用strokeRect函數在畫布中繪製一個x軸座標為150像素、y軸座標為50像素、寬度為70像素、高度為80像素的矩形。相應的程式碼片段如下所示：
//繪製一個矩形
contextObject.beginPath(); //啟動一個新的路徑，以便繪製下一個圖形
//繪製矩形輪廓
contextObject.strokeRect(150, 50, 70, 80);
繪製三角形的JavaScript程式碼片段如下所示：
//繪製一個三角形
contextObject.beginPath();
//設定要開始繪製三角形的起點
contextObject.moveTo(320, 50);
//依次畫三角形的三條邊
contextObject.lineTo(270, 120);
contextObject.lineTo(370, 120);
contextObject.lineTo(320, 50);
contextObject.stroke();
在上面的代碼中，首先通過contextObject變數調用beginPath函數重新設定繪圖路徑，然後通過moveTo函數設定開始點的x軸座標為320像素、y軸座標為50像素，接著先後三次調用lineTo函數依次設定三條邊的終點座標為（270，120）、（370，120）和（320，50），最後調用stroke函數繪製線條。
在繪製圓形時，調用beginPath函數重新設定繪圖路徑之後，接著調用arc函數設定圓心的x軸座標為70像素，y軸座標為200像素，圓的半徑是38像素，圓的起始弧度和終止弧度分別為0弧度和2π弧度，繪製方向為逆時針方向，最後調用stroke函數繪製圓形，相應的JavaScript程式碼片段如下所示：
// 繪製一個圓形
contextObject.beginPath();
//調用arc函數繪製一個整圓
contextObject.arc(70, 200, 38, 0, 2 * Math.PI, true);
contextObject.stroke();
繪製六邊形時，同樣先使用beginPath函數重新設定繪圖路徑，然後調用moveTo函數設定起始點的x軸座標為190像素、y軸座標為160像素，接著先後多次調用lineTo函數依次設定六條邊的終點座標為(150, 190)、(150, 230)、(190, 260)、(230, 230)、(230, 190)和(190, 160)，最後調用stroke函數繪製線條。相應的JavaScript程式碼片段如下所示：
//繪製一個六邊形
contextObject.beginPath();
//設定要開始繪製六邊形的起點
contextObject.moveTo(190, 160);
//依次畫六邊形的六條邊
contextObject.lineTo(150, 190);
contextObject.lineTo(150, 230);
contextObject.lineTo(190, 260);
contextObject.lineTo(230, 230);
contextObject.lineTo(230, 190);
contextObject.lineTo(190, 160);
contextObject.stroke();
以上繪製的是沒有填充色的圖形，下面繪製一個填充了顏色的正方形。調用beginPath函數重新設定繪圖路徑之後，通過fillStyle屬性設定填充色為淺灰色，接著使用fillRect函數繪製一個x軸座標為280像素、y軸座標為160像素、寬度和高度都為80像素的正方形，相應的程式碼片段如下所示：
//繪製一個填充色為淺灰色的正方形
contextObject.beginPath();
//設定填充色
contextObject.fillStyle = "lightgray";
contextObject.fillRect(280, 160, 80, 80);
啟動調試，所繪製的圖形就在畫布上顯示出來了，效果19-31所示。
圖19-31 在畫布上繪製圖形的效果
Win10系列：JavaScript圖形
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
