上一篇：HTML 參考手冊- (HTML5 標準) 下一篇：JavaScript JSON.stringify()

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

一、canvas 簡介

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

?它最初由蘋果內(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ù)來動態(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> 標簽一樣，只是 <canvas> 只有兩個可選的屬性 width、heigth 屬性，而沒有 src、alt 屬性。

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

替換內(nèi)容

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

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

用文本替換：

<canvas>
    你的瀏覽器不支持 canvas，請升級你的瀏覽器。
</canvas>

用 <img> 替換：

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

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

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

2.2 渲染上下文(Thre Rending Context)

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

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

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

2.3 檢測支持性

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

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

2.4 代碼模板

實例

運行代碼 ?

2.5 一個簡單的例子

以下實例繪制兩個長方形：

實例

<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>

運行代碼 ?

三、繪制形狀

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

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

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

3.2 繪制矩形

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

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

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

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

x, y：指的是矩形的左上角的坐標。(相對于canvas的坐標原點)
width, height：指的是繪制的矩形的寬和高。

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

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

四、繪制路徑 (`path`)

圖形的基本元素是路徑。

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

一個路徑，甚至一個子路徑，都是閉合的。

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

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

下面是需要用到的方法：

beginPath()

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

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

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

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

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

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); //把畫筆移動到指定的坐標 ctx.lineTo(200, 50); //繪制一條從當(dāng)前位置到指定坐標(200, 50)的直線. //閉合路徑。會拉一條從當(dāng)前點到path起始點的直線。如果當(dāng)前點與起始點重合，則什么都不做 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會closePath，仍然是一個3角形 ctx.stroke(); //描邊。stroke不會自動closePath() } draw();

4.3 填充三角形

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.fill(); //填充閉合區(qū)域。如果path沒有閉合，則fill()會自動閉合路徑。 } draw();

4.4 繪制圓弧

有兩個方法可以繪制圓?。?/p>

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

注意：

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

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

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

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

圓弧案例 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：控制點1坐標參數(shù)3、4：控制點2坐標參數(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 方法的說明：

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

第 1 條切線：起始點和控制點1決定的直線。

第 2 條切線：控制點1 和控制點2決定的直線。

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

4.5 繪制貝塞爾曲線

4.5.1 什么是貝塞爾曲線

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

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

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

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

一次貝塞爾曲線其實是一條直線

二次貝塞爾曲線

三次貝塞爾曲線

4.5.2 繪制貝塞爾曲線

繪制二次貝塞爾曲線:

quadraticCurveTo(cp1x, cp1y, x, y)

說明：

? 參數(shù) 1 和 2：控制點坐標
? 參數(shù) 3 和 4：結(jié)束點坐標

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(10, 200); //起始點 var cp1x = 40, cp1y = 100; //控制點 var x = 200, y = 200; // 結(jié)束點 //繪制二次貝塞爾曲線 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：控制點 1 的坐標
? 參數(shù) 3 和 4：控制點 2 的坐標
? 參數(shù) 5 和 6：結(jié)束點的坐標

function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(40, 200); //起始點 var cp1x = 20, cp1y = 100; //控制點1 var cp2x = 100, cp2y = 120; //控制點2 var x = 200, y = 200; // 結(jié)束點 //繪制二次貝塞爾曲線 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é)中，只用到了默認的線條和顏色。

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

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

備注：

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

fillStyle

strokeStyle

Transparency(透明度)

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

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

1、line style

線寬。只能是正值。默認是 1.0。

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

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 個值：

butt：線段末端以方形結(jié)束
round：線段末端以圓形結(jié)束
square：線段末端以方形結(jié)束，但是增加了一個寬度和線段相同，高度是線段厚度一半的矩形區(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

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

共有 3 個值 round, bevel 和 miter：
1. round 通過填充一個額外的，圓心在相連部分末端的扇形，繪制拐角的形狀。圓角的半徑是線段的寬度。
2. bevel 在相連部分的末端填充一個額外的以三角形為底的區(qū)域，每個部分都有各自獨立的矩形拐角。
3. miter(默認) 通過延伸相連部分的外邊緣，使其相交于一點，形成一個額外的菱形區(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();