HTML5提供了一種全新的畫布功能，即通過Canvas來讓用戶在網頁中繪制圖形、文字、圖片等。Canvas表示畫布，現(xiàn)實生活中的畫布是用來作畫的，HTML5中的Canvas與之類似，我們可以稱它為“網頁中的畫布”。默認情況下，Canvas是一塊300px乘50px的矩形畫布，用戶可以自定義畫布的大小或為畫布添加其他屬性。
Canvas并不是通過鼠標繪畫的，用戶需要通過Javascript來控制畫布中的內容，例如添加圖片、線條、文字等。本節(jié)將講解如何使用Canvas繪制添加畫布和繪制線條。
使用HTML5中的<canvas>標簽在網頁中創(chuàng)建一個畫布，語法格式如下：
<canvas id="cavsElem" width="400" height="300"> 您的瀏覽器不支持Canvas</canvas>
上述代碼定義了一個id為cavsElem的畫布，并設置了畫布的寬度為400 px，高度為300px。
為了在畫布中繪制圖形，首先要通過JavaScript的getElementByld()方法獲取網頁中的畫布對象，代碼如下：
var canvas=document.getElementById('cavsElem');
在上述代碼中，參數(shù)“2d”代表畫筆的種類，這里表示二維繪圖的畫筆。如果想要繪制三維圖，可以把參數(shù)替換為“webgl”，三維操作目前還沒有廣泛應用，了解即可。
2d代表一個平面，繪制圖形時需要在平面上確定起始點，也就是“從哪里開始畫”，這個點需要通坐標來控制。Canvas的坐標軸從左上角“0，0”開始。x軸向右增大，y軸向下增大，如圖所示。
繪制線條
線是所有復雜圖形的組成基礎，想要繪制復雜的圖形，首先要從繪制線開始。在繪制線之前首先要了解線的組成。一條最單的線由三部分組成，分別為初始位置、連線端點以及描邊，線的組成如圖所示。
在繪制圖形時，首先需要確定從哪里下“筆”，這個下“筆”的位置就是初始位置。在畫布中使用moveTo(x,y)方法來定義初始位置，其中x和y表示水平坐標軸和垂直坐標軸的位置，中間用“，”隔開。x和y的取值為數(shù)字，表示像素值(單位省略)。設置初始位置的示例代碼如下：
var context=canvas.getContext('2d');context.moveTo(x,y);
在畫布中使用line To(x,y)方法來定義連線端點。和初始位置類似，連線端點也需要定義x和y的坐標位置。定義連線端點的代碼如下：
context.lineTo(x,y);
通過初始位置和連線端點可以繪制一條線，但這條線并不能被看到。這時我們需要為線添加描邊，讓線變得可見。使用畫布中的stroke0方法，可以實現(xiàn)線的可視效果。為線添加描邊的代碼如下：
context.stroke();
了解了繪制線的方法后，下面演示如何實現(xiàn)在畫布中通過線條繪制字母M。
創(chuàng)建C:codelchapter02demo12.html,首先創(chuàng)建畫布，然后繪制出字母M。具體代碼如下：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>繪制字母M</title></head><body> <canvas id="cas" width="300" height="300"> 您的瀏覽器不支持Canvas</canvas><script> var context=document.getElementById('cas').getContext('2d'); context.moveTo(10,100); //定義初始位置 context.lineTo(30,10); //定義連線端點 context.lineTo(50,100); //定義連線端點 context.lineTo(70,10); //定義連線端點 context.lineTo(90,100); //定義連線端點 context.stroke(); //描邊</script></body></html>
上述代碼中，第8~10行代碼創(chuàng)建了一個寬300px高300px的畫布：第13~18行代碼通過定義初始位置、定義連線端點和描邊繪制了字母M。
(2)保存代碼，在瀏覽器中訪問demol2.html，頁面效果如圖所示。
繪制字母M
圖中顯示了繪制的字母M，說明成功通過Canvas完成了線條的繪制。
版權聲明：本文內容由互聯(lián)網用戶自發(fā)貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權/違法違規(guī)的內容， 請發(fā)送郵件至 舉報，一經查實，本站將立刻刪除。
