<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>基礎(chǔ)的HTML5頁(yè)面</title> 
</head>

<body>
    <canvas id="canvas">
    你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧??！
    </canvas>
</body> 

</html>

演示 2-1

由于結(jié)果頁(yè)面是一個(gè)完完全全的空白頁(yè)面，所以這里我就不貼圖了。大家可能會(huì)很好奇，為什么會(huì)是一個(gè)空白呢？（廢話，我還沒(méi)來(lái)得及畫畫呢！）Canvas的本意是畫布，也就是畫布的意思（廢話...），畫布在HTML5中是透明的，是不可見(jiàn)的。

那<canvas>標(biāo)簽中的那段文本是什么意思呢？那是一旦瀏覽器執(zhí)行HTML頁(yè)面時(shí)不支持Canvas，就會(huì)顯示這段文字，換言之，只要你的瀏覽器支持Canvas，頁(yè)面上就不會(huì)顯示這個(gè)文本。

那<canvas>中的id是什么意思？id是標(biāo)簽的屬性之一，在JavaScript代碼中用來(lái)指定特定的<canvas>的名字，就像一個(gè)人的身份證號(hào)碼一樣，是唯一的。

為了更清楚的展示Canvas，以及方便之后的演示，我稍微修改了一下代碼，之后的繪圖都會(huì)在這個(gè)Canvas上繪制。

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>基礎(chǔ)的Canvas</title>
</head>

<body>
<div id="canvas-warp">
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;" width="800" height="600">
    你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧！！
    </canvas>
</div>
</body> 

</html>

演示 2-2

運(yùn)行結(jié)果：基礎(chǔ)的Canvas頁(yè)面

對(duì)以上代碼有幾點(diǎn)說(shuō)明：

添加了<div>標(biāo)簽，將<canvas>包裹其中，個(gè)人習(xí)慣，暫時(shí)并沒(méi)有什么卵用。
給<canvas>標(biāo)簽指定了width和height屬性，規(guī)定了它的寬和高。
給<canvas>標(biāo)簽添加了一個(gè)內(nèi)聯(lián)樣式，使其變?yōu)閴K級(jí)元素并居中顯示。

關(guān)于CSS的內(nèi)容這里不做說(shuō)明，畢竟這不是本課程的主角，若做擴(kuò)展會(huì)花費(fèi)大量篇幅?？紤]到HTML、CSS是基礎(chǔ)，建議大家花點(diǎn)時(shí)間自己學(xué)，推薦慕課網(wǎng)的HTML+CSS課程）

引用Canvas元素

文檔對(duì)象模型(DOM)

文檔對(duì)象模型（Document Object Model，簡(jiǎn)稱DOM），是W3C組織推薦的處理可擴(kuò)展標(biāo)志語(yǔ)言的標(biāo)準(zhǔn)編程接口。Document Object Model的歷史可以追溯至1990年代后期微軟與Netscape的“瀏覽器大戰(zhàn)”，雙方為了在JavaScript與JScript一決生死，于是大規(guī)模的賦予瀏覽器強(qiáng)大的功能。微軟在網(wǎng)頁(yè)技術(shù)上加入了不少專屬事物，計(jì)有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網(wǎng)頁(yè)使用非微軟平臺(tái)及瀏覽器無(wú)法正常顯示。DOM即是當(dāng)時(shí)蘊(yùn)釀出來(lái)的杰作。

文檔對(duì)象模型代表了在 HTML 頁(yè)面上的所有對(duì)象。它是語(yǔ)言中立且平臺(tái)中立的。它允許頁(yè)面的內(nèi)容和樣式被 Web 瀏覽器渲染之后再次更新。用戶可以通過(guò) JavaScript 訪問(wèn) DOM。

在開(kāi)始使用<canvas>前,首先需要了解兩個(gè)特定的 DOM 對(duì)象：window 和 document。

window 對(duì)象是 DOM 的最高一級(jí)，需要對(duì)這個(gè)對(duì)象進(jìn)行檢測(cè)來(lái)確保開(kāi)始使用 Canvas 應(yīng)用程序之前，已經(jīng)加載了所有的資源和代碼。
document 對(duì)象包含所有在 HTML 頁(yè)面上的 HTML 標(biāo)簽。需要對(duì)這個(gè)對(duì)象進(jìn)行檢索來(lái)找出用 JavaScript 操縱<canvas>的實(shí)例。

JavaScript放置位置

使用 JavaScript 為 Canvas 編程會(huì)產(chǎn)生一個(gè)問(wèn)題：在創(chuàng)建的頁(yè)面中，從哪里啟動(dòng) JavaScript程序?

把 JavaScript 放進(jìn) HTML 頁(yè)面的<head>標(biāo)簽中是個(gè)不錯(cuò)的主意，這樣做的好處是很容易找到它，也是上一章我們介紹<head>中所提到的。但是，把 JavaScript 程序放在這里就意味著整個(gè) HTML 頁(yè)面要加載完 JavaScrpit 才能配合 HTML 運(yùn)行，這段 JavaScript 代碼也會(huì)在整個(gè)頁(yè)面加載前就開(kāi)始執(zhí)行了。結(jié)果就是，運(yùn)行 JavaScript 程序之前必須檢查 HTML 頁(yè)面是否已經(jīng)加載完畢。

最近有一個(gè)趨勢(shì)是將 JavaScript 放在 HTML 文檔結(jié)尾處的</body>標(biāo)簽之前，這樣就可以確保在 JavaScript 運(yùn)行時(shí)整個(gè)頁(yè)面已經(jīng)加載完畢。然而，由于在運(yùn)行<canvas>程序前需要使用 JavaScript 測(cè)試頁(yè)面是否加載，因此最好還是將 JavaScript 放在<head>中。

不過(guò)本人不走尋常路(笑)，所以之后的案例，還是按照自己的編碼風(fēng)格將JavaScript代碼放在了<body>的尾部。當(dāng)然，如果JavaScript代碼有些多，就推薦使用加載外部 .js 文件的方式。代碼大致如下：

<script type="text/javascript" src="bootstarp.js"></script>

在實(shí)際項(xiàng)目開(kāi)發(fā)中，都是將HTML、CSS、JS三者完全分離的。不過(guò)用于案例演示代碼略少，所以大多沒(méi)有使用加載外部 .js 文件的方式。

獲取canvas對(duì)象

獲取canvas對(duì)象其實(shí)就是一句話的事情。

var canvas = document.getElementById("canvas");

var用于變量定義，由于JS是弱類型語(yǔ)言，所以定義啥變量都用var。跟在var之后的canvas是變量。使用document對(duì)象的getElementById()的方法，通過(guò)id獲取對(duì)象。之前我們?yōu)?code><canvas>標(biāo)簽賦予了一個(gè)id，名叫canvas，所以該句話最后一個(gè)canvas是指<canvas>的id——canvas。（是不是有點(diǎn)繞，需要自己多讀幾遍捋清楚。）

獲得畫筆(2D環(huán)境)

畫畫首先需要啥？畫筆啊。獲取canvas畫筆也是一句話的事情，就是直接使用剛才獲得的canvas對(duì)象，調(diào)用它的getContext("2d")方法，即可。

var context = canvas.getContext("2d");

這里的context便是畫筆了。

在其他教程中都是使用2D環(huán)境這個(gè)專有術(shù)語(yǔ)，我覺(jué)得畫筆更加形象。靈感引自Java中Graphics類的g畫筆，原理與之相同。

總結(jié)

準(zhǔn)備工作只有三步：

布置畫布：通過(guò)添加<canvas>標(biāo)簽，添加canvas元素
獲取畫布：通過(guò)<canvas>標(biāo)簽的id，獲得canvas對(duì)象
獲得畫筆：通過(guò)canvas對(duì)象的getContext("2d")方法，獲得2D環(huán)境

對(duì)應(yīng)的代碼也就是三句話：

<canvas id=“canvas”></canvas>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

完整代碼如下。

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>基礎(chǔ)的Canvas</title>
</head>

<body>
<div id="canvas-warp">
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;" width="800" height="600">
        你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧?。?    </canvas>
</div>

<script>
window.onload = function(){
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
}
</script>
</body>

</html>

演示 2-3

注意幾點(diǎn)：

JavaScript代碼需要包裹在<script>標(biāo)簽中。
window.onload = function(){}加載頁(yè)面后就要立即執(zhí)行，表示網(wǎng)頁(yè)加載完執(zhí)行后面的那個(gè)function函數(shù)體的內(nèi)容。

至此，畫布和畫筆已經(jīng)準(zhǔn)備完畢，接下來(lái)就讓我們使用畫筆(context對(duì)象)繪制出高逼格的圖像吧！覺(jué)醒吧！藝術(shù)家之魂！

上一篇：Ch21 非零環(huán)繞原則下一篇：Ch9 繪制標(biāo)準(zhǔn)圓弧

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久