HTML5 是一個(gè)新興標(biāo)準(zhǔn)，它正在以越來(lái)越快的速度替代久經(jīng)考驗(yàn)的 HTML4。HTML5 是一個(gè) W3C “工作草案” — 意味著它仍然處于開(kāi)發(fā)階段 — 它包含豐富的元素和屬性，它們都支持現(xiàn)行的 HTML 4.01 版本規(guī)范。它還引入了幾個(gè)新元素和屬性，它們適用許多使用 web 頁(yè)面的領(lǐng)域 — 音頻、視頻、圖形、數(shù)據(jù)存儲(chǔ)、內(nèi)容呈現(xiàn)，等等。本文主要關(guān)注圖形方面的增強(qiáng)：canvas。
?
新的 HTML5 canvas 是一個(gè)原生 HTML 繪圖簿，用于 JavaScript 代碼，不使用第三方工具。跨所有 web 瀏覽器的完整 HTML5 支持還沒(méi)有完成，但在新興的支持中，canvas 已經(jīng)可以在幾乎所有現(xiàn)代瀏覽器上良好運(yùn)行了，但 Windows? Internet Explorer? 除外。幸運(yùn)的是，一個(gè)解決方案已經(jīng)出現(xiàn)，將 Internet Explorer 也包含進(jìn)來(lái)。
?
本質(zhì)上，canvas 元素是一個(gè)白板，直到您在它上面 “繪制” 一些可視內(nèi)容。與擁有各種畫筆的藝術(shù)家不同，您使用不同的方法在 canvas 上作畫。您甚至可以在 canvas 上創(chuàng)建并操作動(dòng)畫，這不是使用畫筆和油彩所能夠?qū)崿F(xiàn)的。
本 文探索新的 HTML canvas 元素，從簡(jiǎn)單地包含一個(gè) canvas 元素到高級(jí) JavaScript 交互（動(dòng)畫的關(guān)鍵）逐步進(jìn)行演示。學(xué)習(xí)如何在一個(gè) web 頁(yè)面上顯示 canvas。本文針對(duì) web 設(shè)計(jì)師和開(kāi)發(fā)人員，盡管 JavaScript 知識(shí)不是必須的，但理解該語(yǔ)言的運(yùn)行方式將有所幫助。但是，HTML 知識(shí)是關(guān)鍵所在，尤其是如何創(chuàng)建一個(gè)基本 web 頁(yè)面。
?
要查看本文展示的示例的實(shí)時(shí)實(shí)例，您需要一個(gè)瀏覽器并能訪問(wèn) Internet。所有示例都在一個(gè)真實(shí)網(wǎng)站上提供（參見(jiàn) 參考資料 ）。
?
瀏覽器支持
確 定哪些瀏覽器支持 HTML5 和一個(gè)移動(dòng)目標(biāo)達(dá)到什么程度。在本文撰寫之時(shí)，Google Chrome、Apple Safari 和 Mozilla Firefox 都支持大多數(shù)新的 HTML5 元素，它們都支持 canvas 元素。Internet Explorer 7 和 8 都不支持 HTML5；Internet Explorer 9 處于測(cè)試階段，支持 HTML5，但還有一些問(wèn)題。
?
在此期間，有一個(gè)針對(duì)不支持 HTML5 的 Internet Explorer 版本的補(bǔ)丁可用。這個(gè)補(bǔ)丁的前提是創(chuàng)建使用 JavaScript 代碼的元素。例如，可以使用代碼段
document.createElement('canvas')
創(chuàng)建一個(gè)可識(shí)別的 Canvas 標(biāo)記；但是，這并不意味著有東西經(jīng)過(guò)元素本身 。一個(gè)流行的解決方法是包含一個(gè)完整的基于 canvas 的 JavaScript 庫(kù)，這個(gè)庫(kù)由 Google 提供，稱為
ExplorerCanvas
— 或簡(jiǎn)稱
excanvas
。下載并將其作為一個(gè)外部文件引用，如下所示。（參見(jiàn)
參考資料
中的鏈接，了解更多
excanvas
信息。）
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
?
?
通過(guò)包含
excanvas
，您向 Internet Explorer 提供 canvas 及其大多數(shù)方法。
?
創(chuàng)建您的第一個(gè) canvas
由于 canvas 只是一個(gè) HTML 標(biāo)記，因此它的顯示方式只是包含在標(biāo)記中。第一個(gè)示例（如
圖 1
所示）顯示一個(gè)最簡(jiǎn)單的 canvas。它之所以可見(jiàn)，是因?yàn)樗ㄟ^(guò)
style
屬性獲得了一個(gè)顏色方案，通過(guò)
width
和
height
屬性獲得了其大小。
?
圖 1. 一個(gè)空白 canvas
這個(gè)頁(yè)面的代碼簡(jiǎn)短明了，如 清單 1 所示。
?
清單 1. 包含一個(gè) canvas 的 web 頁(yè)面的 HTML
?
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400"
style="background-color:blue;border: 10px yellow solid"></canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>
?
?
這個(gè) canvas 的寬度和高度均為 400 像素，邊框?yàn)辄S色，背景為藍(lán)色。canvas 上沒(méi)有任何實(shí)際繪圖；繪圖通過(guò)屬于 canvas 的 JavaScript 方法完成。
?
canvas 方法
表 1 列示了幾個(gè)附加到 canvas 上下文的方法。
?
表 1. canvas 方法
方法 用途
getContext(contextId)
|
公開(kāi)在 canvas 上繪圖需要的 API。惟一（當(dāng)前）可用的
contextID
是
2d
。
|
height
|
設(shè)置 canvas 的高度。默認(rèn)值是 150 像素。 |
width
|
設(shè)置 canvas 的寬度。默認(rèn)值是 300 像素。 |
createLinearGradient(x1,y1,x2,y2)
|
創(chuàng)建一個(gè)線性漸變。起始坐標(biāo)為
x1,y1
，結(jié)束坐標(biāo)為
x2,y2
。
|
createRadialGradient(x1,y1,r1,x2,y2,r2)
|
創(chuàng)建一個(gè)放射狀漸變。圓圈的起始坐標(biāo)是
x1,y1
，半徑為
r1
。圓圈的結(jié)束坐標(biāo)為
x2,y2
，半徑為
r2
。
|
addColorStop(offset, color)
|
向一個(gè)漸變添加一個(gè)顏色停止。 顏色停止（color stop） 是漸變中顏色更改發(fā)生的位置。offset 必須介于 0 到 1 之間。 |
fillStyle
|
設(shè)置用于填充一個(gè)區(qū)域的顏色 — 例如，
fillStyle='rgb(255,0,0)'
.
|
strokeStyle
|
設(shè)置用于繪制一根直線的顏色 — 例如，
fillStyle='rgb(255,0,0)'
.
|
fillRect(x,y,w,h)
|
填充一個(gè)定位于
x
和
y
，寬度和高度分別為
w
和
h
的矩形。
|
strokeRect(x,y,w,h)
|
繪制一個(gè)定位于
x
和
y
，寬度和高度分別為
w
和
h
的矩形的輪廓。
|
moveTo(x,y)
|
將繪圖位置移動(dòng)到坐標(biāo)
x,y
。
|
lineTo(x,y)
|
從繪圖方法結(jié)束的最后位置到
x,y
繪制一條直線。
|
?
?
構(gòu)建更復(fù)雜的 canvas 應(yīng)用程序
本小節(jié)將展示一系列示例，每個(gè)示例的功能都比前一個(gè)示例略有增加。
?
更深刻的視覺(jué)體驗(yàn)
首先，將一組矩形放置到 canvas 上。記住，矩形是擁有 4 條直邊和 4 個(gè)直角的圖形，正方形是矩形的變體。 圖 2 顯示 canvas 上有一系列矩形，每個(gè)矩形都比前一個(gè)略小。注意，每個(gè)矩形的顏色都不同，使其更清晰明確。
?
圖 2. 使用一些矩形填充的 canvas
清單 2 顯示了用于創(chuàng)建圖 2 中的 canvas 的代碼。每個(gè)矩形都由兩行代碼創(chuàng)建：首先，
fillStyle
方法使用顏色定義的紅、綠、藍(lán)（RGB）格式定義顏色（
fillStyle='rgb(255,0,0)
）。然后，
fillRect
方法（
fillRect(50,50,300,300)
）定義大小。前兩個(gè)值設(shè)置起始坐標(biāo)，后兩個(gè)值設(shè)置結(jié)束坐標(biāo)。
?
清單 2. 使用 JavaScript 代碼創(chuàng)建上下文并使用各種方法
?
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
window.onload=function() {
var mycanvas=document.getElementById("myCanvasTag");
var mycontext=mycanvas.getContext('2d');
mycontext.fillStyle='rgb(0,0,255)';
mycontext.fillRect(0,0,400,400);
mycontext.fillStyle='rgb(255,0,0)';
mycontext.fillRect(50,50,300,300);
mycontext.fillStyle='rgb(0,255,0)';
mycontext.fillRect(100,100,200,200);
mycontext.fillStyle='rgb(100,100,100)';
mycontext.fillRect(125,175,150,25);
}
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" style="border: 10px yellow solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>
?
?
要在 canvas 上繪圖，通過(guò)將
getContext('2d')
應(yīng)用到 canvas 元素訪問(wèn)提供方法的 API。通過(guò)這個(gè)
document.getElementById
方法，canvas 元素被設(shè)置為一個(gè) JavaScript 變量：
var mycanvas=document.getElementById("myCanvasTag");
?
?
然后將
getContext
應(yīng)用到 canvas 元素，如下所示。
var mycontext=mycanvas.getContext('2d');
?
?
一旦一個(gè)變量被設(shè)置到上下文，所有方法就可以使用了。
下一個(gè)示例展示如何結(jié)合兩種技術(shù)。一種是矩形重疊，方法是使用
fillRect
參數(shù)來(lái)定位矩形（見(jiàn) 圖 3）。
?
圖 3. 向一個(gè) canvas 上的矩形應(yīng)用透明度
第二種技術(shù)是 RGB 顏色處理的變體，即添加透明度。不使用
rgb
，而是使用
rgba
。
a
表示 alpha 通道，該通道控制透明度。在圖 3 中的示例中，第二個(gè)矩形的透明度被設(shè)置為 50%（或 .5），第三個(gè)設(shè)置為 25%（或 .25）。清單 3 顯示了完整的標(biāo)記。
?
清單 3. 使用透明度
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
window.onload=function() {
var mycanvas=document.getElementById("myCanvasTag");
var mycontext=mycanvas.getContext('2d');
mycontext.fillStyle='rgb(0,0,255)';
mycontext.fillRect(30,30,300,300);
mycontext.fillStyle='rgba(0,255,0,0.5)';
mycontext.fillRect(60,60,300,300);
mycontext.fillStyle='rgba(255,0,0,0.25)';
mycontext.fillRect(90,90,300,300);
}
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" style="border: 10px yellow solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>
?
漸變
— 經(jīng)過(guò)協(xié)調(diào)的顏色混合 — 原生于 canvas ，通過(guò)兩種方法：
createLinearGradient
和
createRadialGradient
。圖 4 展示了一個(gè)線性漸變。
addColorStop
方法定義一個(gè)顏色，以及它在漸變中變?yōu)榛顒?dòng)狀態(tài)的位置。由于一個(gè)漸變可以擁有多個(gè)顏色停止，因此這種定位是主觀的。顏色定位值必須介于 0 到 1 之間，但測(cè)試變體和顏色停止的數(shù)量可以生成不同的結(jié)果，即使一個(gè)值（比如 .25）保持不變。換句話說(shuō)，一個(gè)顏色停止可以將其位置設(shè)定為 .25，但是相關(guān)顏色可以從整個(gè)漸變路徑的四分之一處之后一點(diǎn)開(kāi)始發(fā)生，一直持續(xù)到漸變結(jié)束，具體情況取決于您設(shè)置其他顏色停止的位置。記住，這是一個(gè)新 的實(shí)現(xiàn)，可能還在改進(jìn)過(guò)程中。漸變的一個(gè)好處是它們總是引人注目，無(wú)論代碼和結(jié)果是否經(jīng)過(guò)完美的協(xié)調(diào)。
?
圖 4. 一個(gè)線性漸變
圖 4 中的漸變通過(guò) 清單 4 中的 JavaScript 代碼創(chuàng)建。
?
清單 4. 創(chuàng)建一個(gè)線性漸變
var mycanvas=document.getElementById("myCanvasTag");
var mycontext=mycanvas.getContext('2d');
var mygradient=mycontext.createLinearGradient(30,30,300,300);
mygradient.addColorStop(0,"#FF0000");
mygradient.addColorStop(1,"#00FF00");
mycontext.fillStyle=mygradient;
mycontext.fillRect(0,0,400,400);
?
注意，清單 4 中的顏色停止被全面實(shí)現(xiàn)為從這個(gè)方法本身創(chuàng)建的一個(gè)實(shí)時(shí)（on-the-fly）漸變的一個(gè)方法。語(yǔ)句
mygradient.addColorStop(0,"#FF0000")
顯示顏色停止擁有兩個(gè)參數(shù)：位置和顏色。
圖 5 展示了一個(gè)放射狀漸變。用于創(chuàng)建這個(gè)漸變的代碼與清單 4 中的代碼類似，除了使用
createRadialGradient
方法替代
createLinearGradient
方法之外。
?
圖 5. 一個(gè)放射狀漸變
用于創(chuàng)建圖 5 中的放射狀漸變的代碼如 清單 5 所示。注意所有 5 個(gè)顏色停止。
?
清單 5. 創(chuàng)建一個(gè)放射狀漸變
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
window.onload=function() {
var mycanvas=document.getElementById("myCanvasTag");
var mycontext=mycanvas.getContext('2d');
var mygradient=mycontext.createRadialGradient(300,300,0,300,300,300);
mygradient.addColorStop("0","magenta");
mygradient.addColorStop(".25","blue");
mygradient.addColorStop(".50","green");
mygradient.addColorStop(".75","yellow");
mygradient.addColorStop("1.0","red");
mycontext.fillStyle=mygradient;
mycontext.fillRect(0,0,400,400);
}
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" style="border: 10px blue solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>
?
多個(gè) canvas
一個(gè) web 頁(yè)面能夠包含多個(gè) canvas，每個(gè) canvas 引用它們自己的獨(dú)特 JavaScript 上下文變量。結(jié)果，每個(gè) canvas 都獨(dú)立于其他 canvas 工作。圖 6 展示了 4 個(gè) canvas，每個(gè) canvas 上的圖像都不同。
?
圖 6. 一個(gè) web 頁(yè)面上的多個(gè) canvas
清單 6 顯示了用于創(chuàng)建圖 6 中的頁(yè)面的代碼。注意，每個(gè) canvas 都有一個(gè)惟一 ID 且每個(gè)上下文都是惟一的。
?
清單 6. 一個(gè) web 頁(yè)面上的多個(gè) canvas
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
window.onload=function() {
var mycontext1=document.getElementById("myCanvasTag1").getContext('2d');
var mycontext2=document.getElementById("myCanvasTag2").getContext('2d');
var mycontext3=document.getElementById("myCanvasTag3").getContext('2d');
var mycontext4=document.getElementById("myCanvasTag4").getContext('2d');
// gradient 1
var mygradient1=mycontext1.createLinearGradient(30,30,90,90);
mygradient1.addColorStop(0,"#FF0000");
mygradient1.addColorStop(1,"#00FF00");
mycontext1.fillStyle=mygradient1;
mycontext1.fillRect(0,0,100,100);
// gradient 2
var mygradient2=mycontext2.createLinearGradient(30,30,90,90);
mygradient2.addColorStop(1,"#FF0000");
mygradient2.addColorStop(0,"#00FF00");
mycontext2.fillStyle=mygradient2;
mycontext2.fillRect(0,0,100,100);
var mygradient3=mycontext3.createLinearGradient(30,30,90,90);
mygradient3.addColorStop(0,"#0000FF");
mygradient3.addColorStop(.5,"#00FFDD");
mycontext3.fillStyle=mygradient3;
mycontext3.fillRect(0,0,100,100);
var mygradient4=mycontext1.createLinearGradient(30,30,90,90);
mygradient4.addColorStop(0,"#DD33CC");
mygradient4.addColorStop(1,"#EEEEEE");
mycontext4.fillStyle=mygradient4;
mycontext4.fillRect(0,0,100,100);
}
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag1" width="100" height="100" style="border: 10px blue solid">
</canvas>
<canvas id="myCanvasTag2" width="100" height="100" style="border: 10px green solid">
</canvas>
<br />
<canvas id="myCanvasTag3" width="100" height="100" style="border: 10px red solid">
</canvas>
<canvas id="myCanvasTag4" width="100" height="100" style="border: 10px black solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>
?
JavaScript 事件和動(dòng)畫
本 文已經(jīng)展示了可用于 canvas 的各種方法，每種方法都創(chuàng)建了一個(gè)可視結(jié)果。現(xiàn)在我們提高一個(gè)等級(jí)，看看 canvas 如何實(shí)現(xiàn)事件和動(dòng)畫。JavaScript 能夠識(shí)別許多事件，包括在一個(gè)特定 web 頁(yè)面元素上方移動(dòng)或懸停鼠標(biāo)。JavaScript 語(yǔ)言能夠識(shí)別更多事件，下面的示例將使用其中幾個(gè)。
?
整合事件
圖 7 中的示例是使用前面清單中的方法創(chuàng)建的。現(xiàn)在我們添加幾個(gè)新技術(shù)。面部的鼻子、眼睛和圓形項(xiàng)目以及外部邊界都使用
arc
方法創(chuàng)建。眼睫毛被繪制為線條，嘴被創(chuàng)建為一條貝賽爾曲線。圖 7 還在 canvas 底部顯示了一些文本，這是使用
fillText
方法創(chuàng)建的。
?
圖 7. 使用 JavaScript 事件繪制一張正在眨眼的臉
清單 7 顯示圖 7 使用的代碼。
?
清單 7. 使用事件創(chuàng)建一個(gè)眨眼
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
window.onload=function() {
var mycanvas=document.getElementById("myCanvasTag");
var mycontext=mycanvas.getContext('2d');
//draw face
mycontext.beginPath();
mycontext.arc(300, 250, 200, 0, Math.PI * 2, true);
mycontext.closePath();
mycontext.stroke();
//draw left eye
mycontext.beginPath();
mycontext.arc(220, 150, 30, 0, Math.PI * 2, true);
mycontext.closePath();
mycontext.fillStyle='rgb(100,100,225)';
mycontext.fill();
//draw left iris
mycontext.beginPath();
mycontext.arc(220, 150, 10, 0, Math.PI * 2, true);
mycontext.closePath();
mycontext.fillStyle='rgb(0,0,0)';
mycontext.fill();
//draw left eyelid
mycontext.beginPath();
mycontext.arc(220, 150, 30, 0, Math.PI, true);
mycontext.closePath();
mycontext.fillStyle='rgb(200,200,200)';
mycontext.fill();
//draw left eyelashes
mycontext.strokeStyle='rgb(0,0,0)';
lashes(mycontext,198, 170, 193, 185);
lashes(mycontext,208, 177, 204, 193);
lashes(mycontext,220, 180, 220, 195);
lashes(mycontext,232, 177, 236, 193);
lashes(mycontext,242, 170, 247, 185);
mycontext.stroke();
openeye();
//draw right eyelashes
mycontext.strokeStyle='rgb(0,0,0)';
lashes(mycontext, 358, 170, 353, 185);
lashes(mycontext, 368, 177, 364, 193);
lashes(mycontext, 380, 180, 380, 195);
lashes(mycontext, 392, 177, 396, 193);
lashes(mycontext, 402, 170, 407, 185);
mycontext.stroke();
//draw nose
mycontext.beginPath();
mycontext.arc(300, 250, 20, 0, Math.PI * 2, true);
mycontext.closePath();
mycontext.stroke();
// draw smile
mycontext.beginPath();
mycontext.lineWidth = 10;
mycontext.moveTo(180, 320);
mycontext.bezierCurveTo(140, 320, 340, 420, 400, 360);
mycontext.closePath();
mycontext.stroke();
//draw message at bottom
mycontext.font="1em sans-serif";
mycontext.fillStyle="rgb(0,0,0)";
mycontext.fillText("Move the mouse over and off the canvas - the face winks!", 10, 480);
}
function lashes(cntx,x1,y1,x2,y2) {
cntx.moveTo(x1,y1);
cntx.lineTo(x2,y2);
}
function closeeye() {
//close right eye
var mycanvas=document.getElementById("myCanvasTag");
var mycontext=mycanvas.getContext('2d');
mycontext.beginPath();
mycontext.arc(380, 150, 30, 0, Math.PI * 2, true);
mycontext.closePath();
mycontext.fillStyle='rgb(200,200,200)';
mycontext.fill();
}
function openeye() {
//open right eye
var mycanvas=document.getElementById("myCanvasTag");
var mycontext=mycanvas.getContext('2d');
mycontext.beginPath();
mycontext.arc(380, 150, 30, 0, Math.PI * 2, true);
mycontext.closePath();
mycontext.fillStyle='rgb(100,100,225)';
mycontext.fill();
//draw right iris
mycontext.beginPath();
mycontext.arc(380, 150, 10, 0, Math.PI * 2, true);
mycontext.closePath();
mycontext.fillStyle='rgb(0,0,0)';
mycontext.fill();
//draw right eyelid
mycontext.beginPath();
mycontext.arc(380, 150, 30, 0, Math.PI, true);
mycontext.closePath();
mycontext.fillStyle='rgb(200,200,200)';
mycontext.fill();
}
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="600" height="500" style="border: 5px blue solid"
onmouseover="closeeye()" onmouseout="openeye()"></canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>
?
圖 7 中的臉通過(guò)一些 JavaScript 事件而改變。特別是，
onmouseover
和
onmouseout
事件分別用于調(diào)用
closeeye()
和
openeye()
函數(shù)。這些函數(shù)不是 canvas 的方法，但是標(biāo)準(zhǔn) JavaScript 函數(shù)。事件和函數(shù)之間的連接在 canvas 元素本身中進(jìn)行。在 清單 7 中，頁(yè)面的主體區(qū)域接近代碼的底部，那是 canvas 所在的位置。canvas 標(biāo)記內(nèi)是：
onmouseover="closeeye()" onmouseout="openeye()"
?
清單 7 中出現(xiàn)了一個(gè)新的構(gòu)造 —
beginPath()
和
endPath()
的使用，它們用于明確區(qū)分獨(dú)立的復(fù)雜繪圖動(dòng)作。封裝在其中的代碼繪制一個(gè)特殊的圖像，以分隔其他繪圖動(dòng)作。
關(guān)于 清單 7 中的代碼的幾個(gè)值得注意的地方列示如下：
-
當(dāng)頁(yè)面打開(kāi)時(shí)，通過(guò)調(diào)用
openeye()函數(shù)來(lái)繪制右眼。 -
使用
fillText方法將文本寫到 canvas 上。 -
在
arc方法中，MATH.PI * 2創(chuàng)建了一個(gè)完整的圓圈，而MATH.PI將只創(chuàng)建一個(gè)半圓（例如，眼皮）。
?
動(dòng)畫
JavaScript 打包了一個(gè)強(qiáng)大的編程利器。這種語(yǔ)言能夠執(zhí)行很多操控，如 清單 8 所示。這個(gè)代碼重復(fù)運(yùn)行，在 canvas 上繪制一些線條。線條顏色隨機(jī)設(shè)置。
?
清單 8. 使用 JavaScript 創(chuàng)建動(dòng)畫
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" style="border: 10px blue solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
<script>
var mycanvas = document.getElementById("myCanvasTag")
var mycontext = mycanvas.getContext('2d');
var x;
var y;
var x2;
var y2;
var r;
var g;
var b;
function line() {
x=Math.floor(Math.random()*190) + Math.floor(Math.random()*190);
y=Math.floor(Math.random()*190) + Math.floor(Math.random()*190);
x2=Math.floor(Math.random()*190) + Math.floor(Math.random()*190);
y2=Math.floor(Math.random()*190) + Math.floor(Math.random()*190);
r=Math.floor(Math.random()*255);
g=Math.floor(Math.random()*255);
b=Math.floor(Math.random()*255);
mycontext.moveTo(x, y);
mycontext.lineTo(x2, y2);
mycontext.strokeStyle='rgb(' + r + ',' + g + ',' + b + ')';
mycontext.lineWidth=Math.floor(Math.random()*6);
mycontext.stroke();
mycontext.restore();
}
setInterval(line, 100);
</script>
</body>
</html>
?
圖 8 顯示了這個(gè)動(dòng)畫的一張快照。清單 8 中的代碼與本文其他所有代碼示例都不同，因?yàn)?JavaScript 塊被放置到頁(yè)面底部，canvas 元素下方。這確保 canvas 在代碼運(yùn)行之前就已經(jīng)被呈現(xiàn)了。
?
圖 8. JavaScript 用于繪制無(wú)窮無(wú)盡的隨機(jī)線條
?
結(jié)束語(yǔ)
HTML5 被定位于用于改變 web 開(kāi)發(fā)的面貌。新的元素使得頁(yè)面布局更簡(jiǎn)單，支持通過(guò)瀏覽器存儲(chǔ)本地?cái)?shù)據(jù)，擁有 canvas 之類的音頻、視頻和圖形平臺(tái)。隨著瀏覽器升級(jí)以支持更多新功能，web 的性質(zhì)和用戶體驗(yàn)將變得妙趣橫生。web 開(kāi)發(fā)前景一片光明！
?
參考資料
學(xué)習(xí)
- 找到本文中的示例的 實(shí)時(shí)演示 。
- WHATWG 是一個(gè)開(kāi)發(fā)人員社區(qū)，協(xié)助 W3C 改進(jìn) HTML5。
- 馬上 開(kāi)始實(shí)現(xiàn) HTML5 。
- 閱讀來(lái)自 Mozilla 開(kāi)發(fā)人員的 canvas 教程和演示 。
- PHPGuru.org 提供關(guān)于 canvas 用法的信息，以及許多很棒的演示和示例。
- developerWorks Web development 專區(qū) ：通過(guò)專門關(guān)于 Web 技術(shù)的文章和教程，擴(kuò)展您在網(wǎng)站開(kāi)發(fā)方面的技能。
- developerWorks Ajax 資源中心 ：這是有關(guān) Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這里找到。
- developerWorks Web 2.0 資源中心 ，這是有關(guān) Web 2.0 相關(guān)信息的一站式中心，包括大量 Web 2.0 技術(shù)文章、教程、下載和相關(guān)技術(shù)資源。您還可以通過(guò) Web 2.0 新手入門 欄目，迅速了解 Web 2.0 的相關(guān)概念。
- 隨時(shí)關(guān)注 developerWorks 技術(shù)活動(dòng)和網(wǎng)絡(luò)廣播 。
- 觀看 developerWorks 演示中心 ，包括面向初學(xué)者的產(chǎn)品安裝和設(shè)置演示，以及為經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員提供的高級(jí)功能。
- 查看 HTML5 專題 ，了解更多和 HTML5 相關(guān)的知識(shí)和動(dòng)向。
獲得產(chǎn)品和技術(shù)
- 下載 用于 Internet Explorer 的 excanvas.js 庫(kù) 。
- 下載 IBM 產(chǎn)品評(píng)估試用版軟件 或 IBM SOA 人員沙箱 ，并開(kāi)始使用來(lái)自 DB2?、Lotus?、Rational?、Tivoli? 和 WebSphere? 的應(yīng)用程序開(kāi)發(fā)工具和中間件產(chǎn)品。
討論
- 加入 developerWorks 中文社區(qū) 。查看開(kāi)發(fā)人員推動(dòng)的博客、論壇、組和維基，并與其他 developerWorks 用戶交流。
- 關(guān)注 developerWorks 成員 關(guān)于 web 主題的共享書簽 。
- 快速找到答案：訪問(wèn) Web 2.0 Apps 論壇 。
- 快速找到答案：訪問(wèn) Ajax 論壇 。
原文： http://www.ibm.com/developerworks/cn/web/wa-html5canvas/
?
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
