javascript
Win10系列：JavaScript图形
在頁面中添加canvas元素會在頁面上生成一個矩形的位圖畫布，可以使用JavaScript在畫布上實時繪制圖形圖像。在繪制圖形時，需要先調(diào)用畫布的getContext函數(shù)獲取與該畫布相關(guān)的用于繪制圖形（如2D圖形、3D圖形）的對象，然后使用這個對象調(diào)用不同的圖形函數(shù)來繪制相應(yīng)的圖形。下面分別介紹2D圖形中幾種常見圖形的繪制方法。
（1）直線
在繪制直線時，先使用moveTo(x,y)函數(shù)設(shè)置直線的起始點，參數(shù)x和y表示起始點的橫坐標和縱坐標，以像素為單位，接著通過lineTo(x, y) 函數(shù)設(shè)置直線的終點，參數(shù)x和y表示終點的橫坐標和縱坐標，也以像素為單位，最后調(diào)用stroke函數(shù)繪制直線。下面給出一段繪制直線的示例代碼：
//獲取相應(yīng)的畫布
var canvasObject = document.getElementById("canvasID");
//獲取用于繪制2D圖形的對象
var contextObject = canvasObject.getContext("2d");
contextObject.strokeStyle = "rgb(0, 162, 232)"; //設(shè)置線條顏色
contextObject.moveTo(28, 20); //設(shè)置直線的起點
contextObject.lineTo(78, 50); //設(shè)置終點
contextObject.stroke(); //畫直線
上面的代碼首先以"canvasID"為參數(shù)調(diào)用document對象的getElementById函數(shù)從相應(yīng)的頁面中查找id屬性值為canvasID的畫布對象，并賦值給canvasObject變量，通過變量canvasObject調(diào)用畫布對象的getContext函數(shù)獲取與該畫布有關(guān)的用于繪制2D圖形的對象，并賦值給contextObject變量；接著通過contextObject變量調(diào)用strokeStyle屬性來設(shè)置線條的顏色，并調(diào)用moveTo和lineTo函數(shù)分別設(shè)置直線的起點和終點；最后調(diào)用stroke函數(shù)繪制直線。
（2）矩形
可以使用fillRect(x, y, width, height)函數(shù)繪制帶有背景色的矩形，也可以使用strokeRect(x, y, width, height)函數(shù)僅繪制矩形的輪廓，其中參數(shù)x和y用來設(shè)置矩形在畫布上的位置，它們是相對于畫布的左上角的，width和height 分別表示矩形的寬度和高度，以像素為單位。使用fillRect函數(shù)繪制矩形時，可以通過fillStyle屬性設(shè)置填充顏色，該屬性的顏色值可以是 RGB、預(yù)定義的顏色（如red紅色、blue藍色等）、十六進制顏色或者漸變色；使用strokeRect函數(shù)繪制矩形時，可以通過strokeStyle屬性設(shè)置線條的顏色，顏色的取值方法與fillStyle屬性相同。
（3）多邊形
多邊形（如三角形、四邊形等）是通過繪制多條直線組合成的。在繪制多邊形時，先使用moveTo函數(shù)在畫布上設(shè)置一個起始點，然后根據(jù)多邊形的邊數(shù)多次使用lineTo函數(shù)畫出多條首尾相接的直線來組合成多邊形。
（4）圓形
可以使用arc(x, y, radius, startAngle, endAngle, anticlockwise)函數(shù)繪制圓形，其中參數(shù)x和y表示圓心的坐標，x是橫坐標，y是縱坐標，都以像素為單位；radius表示圓的半徑，startAngle和endAngle表示圓弧的起始弧度和終止弧度；anticlockwise的數(shù)據(jù)類型是BOOL類型，當取值為true時，會沿著逆時針方向繪制圓，否則將沿著順時針方向繪制。
介紹了常見圖形的繪制方法后，下面以一個應(yīng)用程序為例演示如何使用JavaScript在畫布上繪制這些圖形。新建一個JavaScript的Windows應(yīng)用商店的空白應(yīng)用程序項目，將其命名為DrawGraphApplication。打開default.html文件，在body元素中添加一個canvas元素，為了便于檢索控件，設(shè)置畫布的id屬性值為canvasID。相應(yīng)的HTML代碼片段如下所示：
<body>
<canvas id="canvasID" width="400" height="320"></canvas>
</body>
為了控制畫布在應(yīng)用程序界面上的顯示外觀，在default.css文件中添加如下代碼來控制畫布的布局。
/*設(shè)置畫布的背景色和在應(yīng)用程序界面上的顯示位置*/
#canvasID {
background-color: gray;
margin-left: 20px;
margin-top: 20px;
}
隨后雙擊打開default.js文件，在"args.setPromise(WinJS.UI.processAll());"語句后先添加如下代碼來獲得畫布并獲取與該畫布相關(guān)的用于繪制2D圖形的對象。
//獲取相應(yīng)的畫布
var canvasObject = document.getElementById("canvasID");
//從該畫布中得到用于繪制2D圖形的對象
var contextObject = canvasObject.getContext("2d");
//設(shè)置所有圖形的線條顏色為白色
contextObject.strokeStyle = "rgb(255,255,255)";
//設(shè)置所有圖形的線條粗細為2像素
contextObject.lineWidth = 2;
在上面的代碼中，以"canvasID"為參數(shù)調(diào)用document對象的getElementById函數(shù)查找id屬性值為canvasID的畫布對象，并賦值給canvasObject變量，然后通過變量canvasObject調(diào)用畫布對象的getContext函數(shù)獲取與該畫布有關(guān)的用于繪制2D圖形的對象，并賦值給contextObject變量，接著通過contextObject變量調(diào)用用于繪制2D圖形的對象的strokeStyle屬性來設(shè)置所有圖形的線條顏色為白色，并通過lineWidth屬性設(shè)置所有圖形的線條寬度為2像素。
緊接著依次添加繪制直線、矩形、三角形、圓形、六邊形和填充正方形的代碼，下面來分別介紹繪制每種圖形的代碼。繪制直線的JavaScript代碼片段如下所示：
//繪制一條直線
contextObject.beginPath(); //重新設(shè)置繪圖路徑
//直線的起點
contextObject.moveTo(100, 50);
//調(diào)用lineTo函數(shù)設(shè)置終點
contextObject.lineTo(30, 120);
contextObject.stroke();
上面的代碼首先通過contextObject變量調(diào)用beginPath函數(shù)重新設(shè)置繪圖路徑，然后通過moveTo函數(shù)設(shè)置開始點的x軸坐標為100像素、y軸坐標為50像素，并調(diào)用lineTo函數(shù)設(shè)置直線終點的x軸坐標為30像素、y軸坐標為120像素，最后調(diào)用stroke函數(shù)繪制直線。
在繪制矩形時，也是先調(diào)用beginPath函數(shù)重新設(shè)置繪圖路徑，接著調(diào)用strokeRect函數(shù)在畫布中繪制一個x軸坐標為150像素、y軸坐標為50像素、寬度為70像素、高度為80像素的矩形。相應(yīng)的代碼片段如下所示：
//繪制一個矩形
contextObject.beginPath(); //啟動一個新的路徑，以便繪制下一個圖形
//繪制矩形輪廓
contextObject.strokeRect(150, 50, 70, 80);
繪制三角形的JavaScript代碼片段如下所示：
//繪制一個三角形
contextObject.beginPath();
//設(shè)置要開始繪制三角形的起點
contextObject.moveTo(320, 50);
//依次畫三角形的三條邊
contextObject.lineTo(270, 120);
contextObject.lineTo(370, 120);
contextObject.lineTo(320, 50);
contextObject.stroke();
在上面的代碼中，首先通過contextObject變量調(diào)用beginPath函數(shù)重新設(shè)置繪圖路徑，然后通過moveTo函數(shù)設(shè)置開始點的x軸坐標為320像素、y軸坐標為50像素，接著先后三次調(diào)用lineTo函數(shù)依次設(shè)置三條邊的終點坐標為（270，120）、（370，120）和（320，50），最后調(diào)用stroke函數(shù)繪制線條。
在繪制圓形時，調(diào)用beginPath函數(shù)重新設(shè)置繪圖路徑之后，接著調(diào)用arc函數(shù)設(shè)置圓心的x軸坐標為70像素，y軸坐標為200像素，圓的半徑是38像素，圓的起始弧度和終止弧度分別為0弧度和2π弧度，繪制方向為逆時針方向，最后調(diào)用stroke函數(shù)繪制圓形，相應(yīng)的JavaScript代碼片段如下所示：
// 繪制一個圓形
contextObject.beginPath();
//調(diào)用arc函數(shù)繪制一個整圓
contextObject.arc(70, 200, 38, 0, 2 * Math.PI, true);
contextObject.stroke();
繪制六邊形時，同樣先使用beginPath函數(shù)重新設(shè)置繪圖路徑，然后調(diào)用moveTo函數(shù)設(shè)置起始點的x軸坐標為190像素、y軸坐標為160像素，接著先后多次調(diào)用lineTo函數(shù)依次設(shè)置六條邊的終點坐標為(150, 190)、(150, 230)、(190, 260)、(230, 230)、(230, 190)和(190, 160)，最后調(diào)用stroke函數(shù)繪制線條。相應(yīng)的JavaScript代碼片段如下所示：
//繪制一個六邊形
contextObject.beginPath();
//設(shè)置要開始繪制六邊形的起點
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();
以上繪制的是沒有填充色的圖形，下面繪制一個填充了顏色的正方形。調(diào)用beginPath函數(shù)重新設(shè)置繪圖路徑之后，通過fillStyle屬性設(shè)置填充色為淺灰色，接著使用fillRect函數(shù)繪制一個x軸坐標為280像素、y軸坐標為160像素、寬度和高度都為80像素的正方形，相應(yīng)的代碼片段如下所示：
//繪制一個填充色為淺灰色的正方形
contextObject.beginPath();
//設(shè)置填充色
contextObject.fillStyle = "lightgray";
contextObject.fillRect(280, 160, 80, 80);
啟動調(diào)試，所繪制的圖形就在畫布上顯示出來了，效果如圖19-31所示。
圖19-31 在畫布上繪制圖形的效果
轉(zhuǎn)載于:https://www.cnblogs.com/finehappy/p/6645434.html
總結(jié)
以上是生活随笔為你收集整理的Win10系列：JavaScript图形的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： laravel框架总结(十一) -- 集
- 下一篇： 城市天际线thegamecrashedt