HTML5最偉大(dà)之處在于引入了畫(huà)布Canvas。Canvas元素是為(wèi)了客戶端點陣圖形而設計(jì)的，它本身沒有(yǒu)繪圖能力，但(dàn)卻把一個(gè)繪圖API展現給客戶端JavaScript以使腳本能夠把想繪制(zhì)的東西都繪制(zhì)到一塊畫(huà)布上(shàng)。本文将通(tōng)過示例簡單介紹canvas的繪圖功能。

canvas擁有(yǒu)多(duō)種繪制(zhì)路徑、矩形、圓形、字符以及添加圖像的方法。我們在Canvas區(qū)域中繪制(zhì)圖形，并不是拿(ná)鼠标在Canvas中畫(huà)畫(huà)。事實上(shàng)Canvas元素隻是一塊無色透明(míng)的區(qū)域，就像一個(gè)隻有(yǒu)寬度高(gāo)度沒有(yǒu)背景的DIV一樣，需要使用JavaScript腳本在其中繪畫(huà)。

示例一：繪制(zhì)方形

我們在頁面上(shàng)創建一個(gè)canvas元素，并且制(zhì)定id及寬和(hé)高(gāo)。

your browser does not support the canvas tag

Canvas 元素本身是沒有(yǒu)繪圖能力的。所有(yǒu)的繪制(zhì)工作(zuò)必須使用JavaScript來(lái)完成：

var c=document.getElementById("square");
var cxt=c.getContext("2d");
cxt.fillStyle="#ff0000";
cxt.fillRect(0,0,150,75);

通(tōng)過document.getElementById("square")來(lái)獲取canvas元素，然後使用c.getContext("2d")來(lái)獲取2d繪圖對象。接着使用fillStyle 方法将其染成紅色，fillRect 方法規定了形狀、位置和(hé)尺寸。上(shàng)例中繪制(zhì)了一個(gè)紅色的方形。

示例二：繪制(zhì)線條

我們可(kě)以通(tōng)過起始坐(zuò)标，和(hé)結束坐(zuò)标，來(lái)繪制(zhì)一條直線。

var line=document.getElementById('line');
var c=line.getContext('2d');
c.moveTo(20,20);
c.lineTo(200,100);
c.lineTo(20,100);
c.stroke();

moveTo(x，y)：設置繪圖起始坐(zuò)标。

lineTo(x, y)：從上(shàng)一個(gè)起點到(x,y)的點畫(huà)線，上(shàng)一個(gè)起點可(kě)以通(tōng)過moveTo來(lái)指定，默認為(wèi)原先路徑的終點。

stroke()：描邊路徑。

示例三：繪制(zhì)圓形

我們可(kě)以通(tōng)過規定尺寸、顔色和(hé)位置，來(lái)繪制(zhì)一個(gè)圓。

var c=document.getElementById('circle');
var r=c.getContext('2d');
r.fillStyle='#ff0000';
r.beginPath();
r.arc(70,80,45,0,Math.PI*2,true);
r.closePath();
r.fill();

beginPath()：創建路徑的第一步是調用beginPath方法，返回一個(gè)存儲路徑的信息。

closePath()：從當前的點到起始點閉合路徑。

arc(x, y, radius, startAngle, endAngle, anticlockwise)： (x,y)是圓弧的圓心，radius-半徑, startAngle和(hé)endAngle是圓弧的開(kāi)始和(hé)結束弧度（radians = (Math.PI/180)*degree)，anticlockwise為(wèi)true的話(huà)是逆時(shí)針，否則為(wèi)順時(shí)針。

fillStyle：設置填充色。

fill()：填充路徑。

示例四：制(zhì)作(zuò)動畫(huà)

我們可(kě)以通(tōng)過javascript動态地在畫(huà)布上(shàng)繪制(zhì)圖像，并産生(shēng)動畫(huà)效果。

var x=0;
var y=0;
var ctx = document.getElementById("animate").getContext("2d");
setInterval(function(){
	ctx.clearRect(0,0,600,600);
	ctx.fillStyle="#fc0";
	ctx.beginPath();
	ctx.arc(x++,y++,15,0,Math.PI*2,true);
	ctx.closePath();
	ctx.fill();
},10);

上(shàng)述代碼中，我們使用setInterval()來(lái)定時(shí)運行(xíng)（每隔10毫秒(miǎo)運行(xíng)一次），畫(huà)布中，繪制(zhì)一個(gè)黃色的圓形，并且在繪制(zhì)前先要clearRect() 清除上(shàng)次繪制(zhì)的圓形，這樣看起來(lái)就是一個(gè)從畫(huà)布左上(shàng)角到右下角運動的小(xiǎo)球的簡單動畫(huà)。

Canvas還(hái)能加載圖像，繪制(zhì)顔色漸變的圖案，産生(shēng)陰影(yǐng)效果等，本站(zhàn)将會(huì)有(yǒu)更多(duō)canvas效果方面的講解。Canvas是一個(gè)很(hěn)輕便的标簽，但(dàn)是，使用它能完成的非常炫麗(lì)效果，這絕對讓你(nǐ)震驚。隻要有(yǒu)JavaScript腳本的支持，Canvas能完成你(nǐ)幾乎能想到的所有(yǒu)效果。