上一篇：HTML 參考手冊(cè)- (HTML5 標(biāo)準(zhǔn)) 下一篇：JavaScript JSON.stringify()

學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

一、canvas 簡(jiǎn)介

?<canvas> 是 HTML5 新增的，一個(gè)可以使用腳本(通常為 JavaScript) 在其中繪制圖像的 HTML 元素。它可以用來制作照片集或者制作簡(jiǎn)單(也不是那么簡(jiǎn)單)的動(dòng)畫，甚至可以進(jìn)行實(shí)時(shí)視頻處理和渲染。

?它最初由蘋果內(nèi)部使用自己 MacOS X WebKit 推出，供應(yīng)用程序使用像儀表盤的構(gòu)件和 Safari 瀏覽器使用。后來，有人通過 Gecko 內(nèi)核的瀏覽器 (尤其是 Mozilla和Firefox)，Opera 和 Chrome 和超文本網(wǎng)絡(luò)應(yīng)用技術(shù)工作組建議為下一代的網(wǎng)絡(luò)技術(shù)使用該元素。

?Canvas 是由 HTML 代碼配合高度和寬度屬性而定義出的可繪制區(qū)域。JavaScript 代碼可以訪問該區(qū)域，類似于其他通用的二維 API，通過一套完整的繪圖函數(shù)來動(dòng)態(tài)生成圖形。

? Mozilla 程序從 Gecko 1.8 (Firefox 1.5) 開始支持 <canvas>, Internet Explorer 從 IE9 開始 <canvas> 。Chrome 和 Opera 9+ 也支持 <canvas>。

二、Canvas基本使用

<canvas id="tutorial" width="300" height="300"></canvas>

2.1 `<canvas>` 元素

?<canvas> 看起來和 <img> 標(biāo)簽一樣，只是 <canvas> 只有兩個(gè)可選的屬性 width、heigth 屬性，而沒有 src、alt 屬性。

?如果不給 <canvas> 設(shè)置 widht、height 屬性時(shí)，則默認(rèn) width為300、height 為 150，單位都是 px。也可以使用 css 屬性來設(shè)置寬高，但是如寬高屬性和初始比例不一致，他會(huì)出現(xiàn)扭曲。所以，建議永遠(yuǎn)不要使用 css 屬性來設(shè)置 <canvas> 的寬高。

替換內(nèi)容

?由于某些較老的瀏覽器（尤其是 IE9 之前的 IE 瀏覽器）或者瀏覽器不支持 HTML 元素 <canvas>，在這些瀏覽器上你應(yīng)該總是能展示替代內(nèi)容。

?支持 <canvas> 的瀏覽器會(huì)只渲染 <canvas> 標(biāo)簽，而忽略其中的替代內(nèi)容。不支持 <canvas> 的瀏覽器則會(huì)直接渲染替代內(nèi)容。

用文本替換：

<canvas>
    你的瀏覽器不支持 canvas，請(qǐng)升級(jí)你的瀏覽器。
</canvas>

用 <img> 替換：

<canvas>
    <img src="./美女.jpg" alt=""> 
</canvas>

結(jié)束標(biāo)簽 </canvas> 不可省略。

與 <img> 元素不同，<canvas> 元素需要結(jié)束標(biāo)簽(</canvas>)。如果結(jié)束標(biāo)簽不存在，則文檔的其余部分會(huì)被認(rèn)為是替代內(nèi)容，將不會(huì)顯示出來。

2.2 渲染上下文(Thre Rending Context)

?<canvas> 會(huì)創(chuàng)建一個(gè)固定大小的畫布，會(huì)公開一個(gè)或多個(gè)渲染上下文(畫筆)，使用渲染上下文來繪制和處理要展示的內(nèi)容。

? 我們重點(diǎn)研究 2D 渲染上下文。其他的上下文我們暫不研究，比如， WebGL 使用了基于 OpenGL ES的3D 上下文 ("experimental-webgl") 。

var canvas = document.getElementById('tutorial');
//獲得 2d 上下文對(duì)象
var ctx = canvas.getContext('2d');

2.3 檢測(cè)支持性

var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

2.4 代碼模板

實(shí)例

運(yùn)行代碼 ?

2.5 一個(gè)簡(jiǎn)單的例子

以下實(shí)例繪制兩個(gè)長(zhǎng)方形：

實(shí)例

<canvas id="tutorial" width="300" height="300"></canvas> <script type="text/javascript"> function draw(){ var canvas = document.getElementById('tutorial'); if(!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; //繪制矩形 ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } draw(); </script>

運(yùn)行代碼 ?

三、繪制形狀

3.1 柵格 `(grid)` 和坐標(biāo)空間

?如下圖所示，canvas 元素默認(rèn)被網(wǎng)格所覆蓋。通常來說網(wǎng)格中的一個(gè)單元相當(dāng)于 canvas 元素中的一像素。柵格的起點(diǎn)為左上角，坐標(biāo)為 (0,0) 。所有元素的位置都相對(duì)于原點(diǎn)來定位。所以圖中藍(lán)色方形左上角的坐標(biāo)為距離左邊（X 軸）x 像素，距離上邊（Y 軸）y 像素，坐標(biāo)為 (x,y)。

?后面我們會(huì)涉及到坐標(biāo)原點(diǎn)的平移、網(wǎng)格的旋轉(zhuǎn)以及縮放等。

3.2 繪制矩形

?<canvas> 只支持一種原生的圖形繪制：矩形。所有其他圖形都至少需要生成一種路徑 (path)。不過，我們擁有眾多路徑生成的方法讓復(fù)雜圖形的繪制成為了可能。

canvast 提供了三種方法繪制矩形：

1、fillRect(x, y, width, height)：繪制一個(gè)填充的矩形。
2、strokeRect(x, y, width, height)：繪制一個(gè)矩形的邊框。
3、clearRect(x, y, widh, height)：清除指定的矩形區(qū)域，然后這塊區(qū)域會(huì)變的完全透明。

說明：這 3 個(gè)方法具有相同的參數(shù)。

x, y：指的是矩形的左上角的坐標(biāo)。(相對(duì)于canvas的坐標(biāo)原點(diǎn))
width, height：指的是繪制的矩形的寬和高。

function draw(){ var canvas = document.getElementById('tutorial'); if(!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.fillRect(10, 10, 100, 50); // 繪制矩形，填充的默認(rèn)顏色為黑色 ctx.strokeRect(10, 70, 100, 50); // 繪制矩形邊框 } draw();

ctx.clearRect(15, 15, 50, 25);

四、繪制路徑 (`path`)

圖形的基本元素是路徑。

路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點(diǎn)的集合。

一個(gè)路徑，甚至一個(gè)子路徑，都是閉合的。

使用路徑繪制圖形需要一些額外的步驟：

創(chuàng)建路徑起始點(diǎn)
調(diào)用繪制方法去繪制出路徑
把路徑封閉
一旦路徑生成，通過描邊或填充路徑區(qū)域來渲染圖形。

下面是需要用到的方法：

beginPath()

新建一條路徑，路徑一旦創(chuàng)建成功，圖形繪制命令被指向到路徑上生成路徑
moveTo(x, y)

把畫筆移動(dòng)到指定的坐標(biāo)(x, y)。相當(dāng)于設(shè)置路徑的起始點(diǎn)坐標(biāo)。
closePath()

閉合路徑之后，圖形繪制命令又重新指向到上下文中
stroke()

通過線條來繪制圖形輪廓
fill()

通過填充路徑的內(nèi)容區(qū)域生成實(shí)心的圖形

4.1 繪制線段

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); //新建一條path ctx.moveTo(50, 50); //把畫筆移動(dòng)到指定的坐標(biāo) ctx.lineTo(200, 50); //繪制一條從當(dāng)前位置到指定坐標(biāo)(200, 50)的直線. //閉合路徑。會(huì)拉一條從當(dāng)前點(diǎn)到path起始點(diǎn)的直線。如果當(dāng)前點(diǎn)與起始點(diǎn)重合，則什么都不做 ctx.closePath(); ctx.stroke(); //繪制路徑。 } draw();

4.2 繪制三角形邊框

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(200, 50); ctx.lineTo(200, 200); ctx.closePath(); //雖然我們只繪制了兩條線段，但是closePath會(huì)closePath，仍然是一個(gè)3角形 ctx.stroke(); //描邊。stroke不會(huì)自動(dòng)closePath() } draw();

4.3 填充三角形

4.4 繪制圓弧

有兩個(gè)方法可以繪制圓弧：

1、arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y) 為圓心，以r 為半徑，從 startAngle 弧度開始到endAngle弧度結(jié)束。anticlosewise 是布爾值，true 表示逆時(shí)針，false 表示順時(shí)針(默認(rèn)是順時(shí)針)。

注意：

這里的度數(shù)都是弧度。

0 弧度是指的 x 軸正方向。

radians=(Math.PI/180)*degrees   //角度轉(zhuǎn)換成弧度

2、arcTo(x1, y1, x2, y2, radius): 根據(jù)給定的控制點(diǎn)和半徑畫一段圓弧，最后再以直線連接兩個(gè)控制點(diǎn)。

圓弧案例 1

圓弧案例 2

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(50, 50, 40, 0, Math.PI / 2, false); ctx.stroke(); ctx.beginPath(); ctx.arc(150, 50, 40, 0, -Math.PI / 2, true); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2, false); ctx.fill(); ctx.beginPath(); ctx.arc(150, 150, 40, 0, Math.PI, false); ctx.fill(); } draw();

圓弧案例 3

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 50); //參數(shù)1、2：控制點(diǎn)1坐標(biāo) 參數(shù)3、4：控制點(diǎn)2坐標(biāo) 參數(shù)4：圓弧半徑 ctx.arcTo(200, 50, 200, 200, 100); ctx.lineTo(200, 200) ctx.stroke(); ctx.beginPath(); ctx.rect(50, 50, 10, 10); ctx.rect(200, 50, 10, 10) ctx.rect(200, 200, 10, 10) ctx.fill() } draw();

arcTo 方法的說明：

這個(gè)方法可以這樣理解。繪制的弧形是由兩條切線所決定。

第 1 條切線：起始點(diǎn)和控制點(diǎn)1決定的直線。

第 2 條切線：控制點(diǎn)1 和控制點(diǎn)2決定的直線。

?其實(shí)繪制的圓弧就是與這兩條直線相切的圓弧。

4.5 繪制貝塞爾曲線

4.5.1 什么是貝塞爾曲線

貝塞爾曲線(Bézier curve)，又稱貝茲曲線或貝濟(jì)埃曲線，是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。

一般的矢量圖形軟件通過它來精確畫出曲線，貝茲曲線由線段與節(jié)點(diǎn)組成，節(jié)點(diǎn)是可拖動(dòng)的支點(diǎn)，線段像可伸縮的皮筋，我們?cè)诶L圖工具上看到的鋼筆工具就是來做這種矢量曲線的。

貝塞爾曲線是計(jì)算機(jī)圖形學(xué)中相當(dāng)重要的參數(shù)曲線，在一些比較成熟的位圖軟件中也有貝塞爾曲線工具如 PhotoShop 等。在 Flash4 中還沒有完整的曲線工具，而在 Flash5 里面已經(jīng)提供出貝塞爾曲線工具。

貝塞爾曲線于 1962，由法國工程師皮埃爾·貝塞爾（Pierre Bézier）所廣泛發(fā)表，他運(yùn)用貝塞爾曲線來為汽車的主體進(jìn)行設(shè)計(jì)。貝塞爾曲線最初由Paul de Casteljau 于 1959 年運(yùn)用 de Casteljau 演算法開發(fā)，以穩(wěn)定數(shù)值的方法求出貝茲曲線。

一次貝塞爾曲線其實(shí)是一條直線

二次貝塞爾曲線

三次貝塞爾曲線

4.5.2 繪制貝塞爾曲線

繪制二次貝塞爾曲線:

quadraticCurveTo(cp1x, cp1y, x, y)

說明：

? 參數(shù) 1 和 2：控制點(diǎn)坐標(biāo)
? 參數(shù) 3 和 4：結(jié)束點(diǎn)坐標(biāo)

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(10, 200); //起始點(diǎn) var cp1x = 40, cp1y = 100; //控制點(diǎn) var x = 200, y = 200; // 結(jié)束點(diǎn) //繪制二次貝塞爾曲線 ctx.quadraticCurveTo(cp1x, cp1y, x, y); ctx.stroke(); ctx.beginPath(); ctx.rect(10, 200, 10, 10); ctx.rect(cp1x, cp1y, 10, 10); ctx.rect(x, y, 10, 10); ctx.fill(); } draw();

繪制三次貝塞爾曲線:

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

說明：

? 參數(shù) 1 和 2：控制點(diǎn) 1 的坐標(biāo)
? 參數(shù) 3 和 4：控制點(diǎn) 2 的坐標(biāo)
? 參數(shù) 5 和 6：結(jié)束點(diǎn)的坐標(biāo)

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(40, 200); //起始點(diǎn) var cp1x = 20, cp1y = 100; //控制點(diǎn)1 var cp2x = 100, cp2y = 120; //控制點(diǎn)2 var x = 200, y = 200; // 結(jié)束點(diǎn) //繪制二次貝塞爾曲線 ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); ctx.stroke(); ctx.beginPath(); ctx.rect(40, 200, 10, 10); ctx.rect(cp1x, cp1y, 10, 10); ctx.rect(cp2x, cp2y, 10, 10); ctx.rect(x, y, 10, 10); ctx.fill(); } draw();

五、添加樣式和顏色

? 在前面的繪制矩形章節(jié)中，只用到了默認(rèn)的線條和顏色。

? 如果想要給圖形上色，有兩個(gè)重要的屬性可以做到。

fillStyle = color 設(shè)置圖形的填充顏色
strokeStyle = color 設(shè)置圖形輪廓的顏色

備注：

1. color 可以是表示 css 顏色值的字符串、漸變對(duì)象或者圖案對(duì)象。
2. 默認(rèn)情況下，線條和填充顏色都是黑色。
3. 一旦您設(shè)置了 strokeStyle 或者 fillStyle 的值，那么這個(gè)新值就會(huì)成為新繪制的圖形的默認(rèn)值。如果你要給每個(gè)圖形上不同的顏色，你需要重新設(shè)置 fillStyle 或 strokeStyle 的值。

fillStyle

strokeStyle

Transparency(透明度)

globalAlpha = transparencyValue: 這個(gè)屬性影響到 canvas 里所有圖形的透明度，有效的值范圍是 0.0 （完全透明）到 1.0（完全不透明），默認(rèn)是 1.0。

? globalAlpha 屬性在需要繪制大量擁有相同透明度的圖形時(shí)候相當(dāng)高效。不過，我認(rèn)為使用rgba()設(shè)置透明度更加好一些。

1、line style

線寬。只能是正值。默認(rèn)是 1.0。

起始點(diǎn)和終點(diǎn)的連線為中心，上下各占線寬的一半。

ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(100, 10); ctx.lineWidth = 10; ctx.stroke(); ctx.beginPath(); ctx.moveTo(110, 10); ctx.lineTo(160, 10) ctx.lineWidth = 20; ctx.stroke()

2. lineCap = type

線條末端樣式。

共有 3 個(gè)值：

butt：線段末端以方形結(jié)束
round：線段末端以圓形結(jié)束
square：線段末端以方形結(jié)束，但是增加了一個(gè)寬度和線段相同，高度是線段厚度一半的矩形區(qū)域。

var lineCaps = ["butt", "round", "square"]; for (var i = 0; i < 3; i++){ ctx.beginPath(); ctx.moveTo(20 + 30 * i, 30); ctx.lineTo(20 + 30 * i, 100); ctx.lineWidth = 20; ctx.lineCap = lineCaps[i]; ctx.stroke(); } ctx.beginPath(); ctx.moveTo(0, 30); ctx.lineTo(300, 30); ctx.moveTo(0, 100); ctx.lineTo(300, 100) ctx.strokeStyle = "red"; ctx.lineWidth = 1; ctx.stroke();

3. lineJoin = type

同一個(gè) path 內(nèi)，設(shè)定線條與線條間接合處的樣式。

共有 3 個(gè)值 round, bevel 和 miter：
1. round 通過填充一個(gè)額外的，圓心在相連部分末端的扇形，繪制拐角的形狀。圓角的半徑是線段的寬度。
2. bevel 在相連部分的末端填充一個(gè)額外的以三角形為底的區(qū)域，每個(gè)部分都有各自獨(dú)立的矩形拐角。
3. miter(默認(rèn)) 通過延伸相連部分的外邊緣，使其相交于一點(diǎn)，形成一個(gè)額外的菱形區(qū)域。
  
  function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); var lineJoin = ['round', 'bevel', 'miter']; ctx.lineWidth = 20; for (var i = 0; i < lineJoin.length; i++){ ctx.lineJoin = lineJoin[i]; ctx.beginPath(); ctx.moveTo(50, 50 + i * 50); ctx.lineTo(100, 100 + i * 50); ctx.lineTo(150, 50 + i * 50); ctx.lineTo(200, 100 + i * 50); ctx.lineTo(250, 50 + i * 50); ctx.stroke(); } } draw();