更新時(shí)間:2023-06-06 來(lái)源:黑馬程序員 瀏覽量:
HTML5提供了一種全新的畫(huà)布功能,即通過(guò)Canvas來(lái)讓用戶在網(wǎng)頁(yè)中繪制圖形、文字、圖片等。Canvas表示畫(huà)布,現(xiàn)實(shí)生活中的畫(huà)布是用來(lái)作畫(huà)的,HTML5中的Canvas與之類似,我們可以稱它為“網(wǎng)頁(yè)中的畫(huà)布”。默認(rèn)情況下,Canvas是一塊300px乘50px的矩形畫(huà)布,用戶可以自定義畫(huà)布的大小或?yàn)楫?huà)布添加其他屬性。
Canvas并不是通過(guò)鼠標(biāo)繪畫(huà)的,用戶需要通過(guò)JavaScript來(lái)控制畫(huà)布中的內(nèi)容,例如添加圖片、線條、文字等。本節(jié)將講解如何使用Canvas繪制添加畫(huà)布和繪制線條。
使用HTML5中的<canvas>標(biāo)簽在網(wǎng)頁(yè)中創(chuàng)建一個(gè)畫(huà)布,語(yǔ)法格式如下:
<canvas id="cavsElem" width="400" height="300"> 您的瀏覽器不支持Canvas </canvas>
上述代碼定義了一個(gè)id為cavsElem的畫(huà)布,并設(shè)置了畫(huà)布的寬度為400 px,高度為300px。
為了在畫(huà)布中繪制圖形,首先要通過(guò)JavaScript的getElementByld()方法獲取網(wǎng)頁(yè)中的畫(huà)布對(duì)象,代碼如下:
var canvas=document.getElementById('cavsElem');
在上述代碼中,參數(shù)“2d”代表畫(huà)筆的種類,這里表示二維繪圖的畫(huà)筆。如果想要繪制三維圖,可以把參數(shù)替換為“webgl”,三維操作目前還沒(méi)有廣泛應(yīng)用,了解即可。
2d代表一個(gè)平面,繪制圖形時(shí)需要在平面上確定起始點(diǎn),也就是“從哪里開(kāi)始畫(huà)”,這個(gè)點(diǎn)需要通坐標(biāo)來(lái)控制。Canvas的坐標(biāo)軸從左上角“0,0”開(kāi)始。x軸向右增大,y軸向下增大,如圖所示。
繪制線條
線是所有復(fù)雜圖形的組成基礎(chǔ),想要繪制復(fù)雜的圖形,首先要從繪制線開(kāi)始。在繪制線之前首先要了解線的組成。一條最單的線由三部分組成,分別為初始位置、連線端點(diǎn)以及描邊,線的組成如圖所示。
在繪制圖形時(shí),首先需要確定從哪里下“筆”,這個(gè)下“筆”的位置就是初始位置。在畫(huà)布中使用moveTo(x,y)方法來(lái)定義初始位置,其中x和y表示水平坐標(biāo)軸和垂直坐標(biāo)軸的位置,中間用“,”隔開(kāi)。x和y的取值為數(shù)字,表示像素值(單位省略)。設(shè)置初始位置的示例代碼如下:
var context=canvas.getContext('2d'); context.moveTo(x,y);
在畫(huà)布中使用line To(x,y)方法來(lái)定義連線端點(diǎn)。和初始位置類似,連線端點(diǎn)也需要定義x和y的坐標(biāo)位置。定義連線端點(diǎn)的代碼如下:
context.lineTo(x,y);
通過(guò)初始位置和連線端點(diǎn)可以繪制一條線,但這條線并不能被看到。這時(shí)我們需要為線添加描邊,讓線變得可見(jiàn)。使用畫(huà)布中的stroke0方法,可以實(shí)現(xiàn)線的可視效果。為線添加描邊的代碼如下:
context.stroke();
了解了繪制線的方法后,下面演示如何實(shí)現(xiàn)在畫(huà)布中通過(guò)線條繪制字母M。
創(chuàng)建C:\codelchapter02demo12.html,首先創(chuàng)建畫(huà)布,然后繪制出字母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); //定義連線端點(diǎn) context.lineTo(50,100); //定義連線端點(diǎn) context.lineTo(70,10); //定義連線端點(diǎn) context.lineTo(90,100); //定義連線端點(diǎn) context.stroke(); //描邊 </script> </body> </html>
上述代碼中,第8~10行代碼創(chuàng)建了一個(gè)寬300px高300px的畫(huà)布:第13~18行代碼通過(guò)定義初始位置、定義連線端點(diǎn)和描邊繪制了字母M。
(2)保存代碼,在瀏覽器中訪問(wèn)demol2.html,頁(yè)面效果如圖所示。
繪制字母M
圖中顯示了繪制的字母M,說(shuō)明成功通過(guò)Canvas完成了線條的繪制。