H5canvas基礎

本篇文章開始講解HTML5的核心功能之一：Canvas

通過Canvas可以動態生成和展示圖形、圖表、圖像以及動畫。

Canvas API功能非常多，我們將討論最常用的功能。

我們先新建一個canvas看看。

我們給canvas加一個邊框，這樣比較方便看。

可以看到， canvas會創建一塊矩形區域，默認情況下生成大小是300*150像素。

在頁面中加入canvas后，我們便可以通過js來自由地控制她。

例如 添加圖片、線條以及文字，也可以在里面繪圖，甚至加入高級動畫。

Note

把canvas當作一個普通的標簽，可以通過應用CSS的方式來改變樣式，而且一些CSS屬性還可以被canvas內的元素繼承。

例如字體樣式，在canvas內添加文字，其樣式默認是同canvas元素本身是一樣的。

文章提綱

• 要點
• 理論基礎/前置條件
• 詳細步驟
• 總結

要點

掌握使用canvas API的重要流程

掌握常用的canvas API：例如moveTo, lineTo, beginPath, closePath,stroke,fill等

充分理解例子

理論基礎 -- canvas坐標

如下圖，canvas中的坐標是從左上角開始，x軸沿着水平方向（按像素）向右延伸，y軸沿垂直方向向下延伸。

最左上角坐標為 (0,0) 的點為原點。

詳細步驟 -- 使用HTML5 canvas API

檢測瀏覽器支持情況

我們做兩件事

1. 我們用一段script判斷瀏覽器支持情況。

   如果不支持可以將提示信息顯示在特定的位置。

   如下圖，我們用了一個id="support"的div來顯示提示升級的信息。

2. 我們在canvas中寫入一段替代內容.

   如下圖，如果不支持，canvas會顯示替代內容。

瀏覽器支持

把IE調成IE7模式測試下不支持的情況：

 

利用canvas畫一條對角線

對上面的例子做一些修改

在canvas中繪制一條對角線

根據上面的js代碼，歸納出使用canvas API的重要流程。

1. 根據canvas ID值獲取canvas對象訪問權，接着定義一個context變量，調用canvas對象的getContext方法。
2. 基於這個context執行動作（這里是畫一條對角線）
3. 通過context.stroke()完成線條的繪制。

Note

這里有一個坑。我原來將設置canvas長寬放在了style里面。如下圖。

出現問題的原因：

canvas的width和height是畫布的實際寬度和高度，繪制的圖形在這個畫布上面。

canvas的style的width和height是canvas在瀏覽器中被渲染的高度和寬度。

因此需要注意設置寬度時要在外面設置。

使用變換(transformation)畫對角線

下面來看canvas上繪制圖像的另外一種方式：使用變換(transformation)。

transformation是實現復雜canvas操作的最好方式（就單個上面繪制對角線來說看起來是更加復雜了點）

理解 變換（transformation）：

把它當成是介於開發人員發出的指令和canvas顯示結果之間的一個修正層 （modification layer）

注意 不管在開發中是否使用變換，修正層始終存在。

每個繪制操作的結果顯示在canvas上之前都要經過修正層去修正。

雖然這么做增加了額外的復雜性，但卻為繪制系統添加了更為強大的功能。

Note

不在代碼中調用變換函數並不意味着可以提升canvas的性能。

canvas在執行的時候，變換會被呈現引擎隱式調用，這與開發人員是否直接調用無關。

可重用代碼的一條重要建議：

一般繪制都應從原點開始，應用變換（縮放，平移，旋轉等），然后不斷修改代碼直至達到希望的效果。

示例

這個代碼的結果和上面是一模一樣的。

大家注意這兩種代碼的差別：

對第二種方式, translate(70,140) 代表將原點移到 (70,140) 這個位置。

也就是說，接下來所有操作都是相對於 (70,140) 這個位置來操作的。

第一種情況是（70，140）à(140,70)，

第二種情況是(0,0)à(70,140)à(70,-70)

第二種情況的(70, -70)是相對於新的原點(70,140)點來說的，相對於一開始的原點坐標是(70+70，-70+140)，很容易看到這兩種情況的結果是等價的，理解了嗎？

大家體會一下。

我們歸納一下上面的操作：

1. 根據canvas ID值獲取canvas對象訪問權，接着定義一個context變量，調用canvas對象的getContext方法。
2. 保存尚未修改的context, 這樣即使進行了繪制和變換操作，也可以恢復到初始狀態（通過后面的restore函數）
3. 通過translate來移動原點，這個上面已經解釋過了。
4. 基於移動過的context執行畫線動作
5. 通過context.stroke()完成線條的繪制。
6. 最后，恢復context至原始狀態，這樣后續的canvas操作就不會被剛才的平移操作影響了。

畫樹

現在學習稍微復雜點的圖形。

前面繪制的一條對角線算是一條簡單路徑。

實際上路徑可以很復雜：多條線、曲線段、甚至是子路徑。

如果想在canvas上繪制任意形狀，那么你需要重點關注路徑API

按照慣例，不論開始繪制何種圖形，第一個需要調用的就是beginPath, 對於canvas來說，beginPath函數的最大用處是canvas需要據此來計算圖形的內部和外部范圍，以便完成后續的描邊和填充。

路徑會跟蹤當前坐標，默認值是原點。

調用beginPath之后，就可以使用context的各種方法來繪制想要的形狀了。

到目前為止已經使用了幾個簡單的context路徑函數。

moveTo(x,y)

lineTo(x,y)

上面兩個函數的區別是：moveTo就像是提起畫筆，移動到新位置；

而lineTo告訴canvas用畫筆從紙上的舊坐標畫條直線到新坐標。

注意，不管調用的是哪一個，都不會真正畫出圖形，因為我們還沒有調用stroke或者fill函數。

目前我們只是定義路徑的位置，以便后面繪制時使用。

另外再介紹一個路徑函數closePath, 這個函數和lineTo很像，唯一的差別是會將路徑的起始坐標 自動作為 目標坐標。

clothPath還會通知canvas當前繪制的圖形已經完全閉合或者形成了完全封閉的區域，這對將來的填充和描邊都非常有用。

此時，可以在已有的路徑中繼續創建其他的子路徑，或者隨時調用beginPath重新繪制新路徑並完全清除之前的所有路徑。

1.繪制樹冠

繪制樹冠的函數

 

為了直觀的顯示圖線的走勢，我畫了個從開始點到頂點的草圖，如下

在canvas上畫樹的函數：

最終結果如下

下面我們對樹冠做一些美化，在stroke之前添加如下代碼

變成了更粗更平滑的棕色線條。

進一步美化，將閉合路徑內部填充為綠色。

 

注意，右邊的邊框也變細了。

當我們采用先描邊后填充的方式，會填充一半的邊框。

如果要不填充邊框，需要采用先填充后描邊的方式，如下。

2. 利用fillRect畫樹干（填充矩形區域）

我們先把translate的數值改一下，讓出樹干的位置。

context.translate(130,150);

通過fillRect（x, y, 寬, 高）來畫出樹干。

注意，這段要在context.restore();前面，否則畫的位置就錯了。

最終結果：

Note

fillRect(x,y,width,height)

總結

大家初步可以看到canvas的威力，可以不用借助第三方技術進行繪圖。

當然目前畫的東西還比較簡單，下篇文章將會在這棵樹的基礎上加入其他元素和特殊效果，完成一幅雨水動畫效果的林蔭小道圖。

好了，今天就到這里，歡迎大家多多評論，讓下一篇文章更好：）

 http://javascript.ruanyifeng.com/htmlapi/canvas.html

目錄

• 概述
• 繪圖方法
• 圖像處理方法
• drawImage方法
• getImageData方法，putImageData方法
• toDataURL方法
• save方法，restore方法
• 動畫
• 像素處理
• 灰度效果
• 復古效果
• 紅色蒙版效果
• 亮度效果
• 反轉效果
• 參考鏈接

概述

Canvas API（畫布）用於在網頁實時生成圖像，並且可以操作圖像內容，基本上它是一個可以用JavaScript操作的位圖（bitmap）。

使用前，首先需要新建一個canvas網頁元素。

<canvas id="myCanvas" width="400" height="200"> 您的瀏覽器不支持canvas！ </canvas> 

上面代碼中，如果瀏覽器不支持這個API，則就會顯示canvas標簽中間的文字——“您的瀏覽器不支持canvas！”。

每個canvas元素都有一個對應的context對象（上下文對象），Canvas API定義在這個context對象上面，所以需要獲取這個對象，方法是使用getContext方法。

var canvas = document.getElementById('myCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); } 

上面代碼中，getContext方法指定參數2d，表示該canvas對象用於生成2D圖案（即平面圖案）。如果參數是webgl，就表示用於生成3D圖像（即立體圖案），這部分實際上單獨叫做WebGL API（本書不涉及）。

繪圖方法

canvas畫布提供了一個用來作圖的平面空間，該空間的每個點都有自己的坐標，x表示橫坐標，y表示豎坐標。原點(0, 0)位於圖像左上角，x軸的正向是原點向右，y軸的正向是原點向下。

（1）繪制路徑

beginPath方法表示開始繪制路徑，moveTo(x, y)方法設置線段的起點，lineTo(x, y)方法設置線段的終點，stroke方法用來給透明的線段着色。

ctx.beginPath(); // 開始路徑繪制 ctx.moveTo(20, 20); // 設置路徑起點，坐標為(20,20) ctx.lineTo(200, 20); // 繪制一條到(200,20)的直線 ctx.lineWidth = 1.0; // 設置線寬 ctx.strokeStyle = "#CC0000"; // 設置線的顏色 ctx.stroke(); // 進行線的着色，這時整條線才變得可見

moveto和lineto方法可以多次使用。最后，還可以使用closePath方法，自動繪制一條當前點到起點的直線，形成一個封閉圖形，省卻使用一次lineto方法。

（2）繪制矩形

fillRect(x, y, width, height)方法用來繪制矩形，它的四個參數分別為矩形左上角頂點的x坐標、y坐標，以及矩形的寬和高。fillStyle屬性用來設置矩形的填充色。

ctx.fillStyle = 'yellow'; ctx.fillRect(50, 50, 200, 100); 

strokeRect方法與fillRect類似，用來繪制空心矩形。

ctx.strokeRect(10,10,200,100); 

clearRect方法用來清除某個矩形區域的內容。

ctx.clearRect(100,50,50,50); 

（3）繪制文本

fillText(string, x, y) 用來繪制文本，它的三個參數分別為文本內容、起點的x坐標、y坐標。使用之前，需用font設置字體、大小、樣式（寫法類似與CSS的font屬性）。與此類似的還有strokeText方法，用來添加空心字。

// 設置字體 ctx.font = "Bold 20px Arial"; // 設置對齊方式 ctx.textAlign = "left"; // 設置填充顏色 ctx.fillStyle = "#008600"; // 設置字體內容，以及在畫布上的位置 ctx.fillText("Hello!", 10, 50); // 繪制空心字 ctx.strokeText("Hello!", 10, 100); 

fillText方法不支持文本斷行，即所有文本出現在一行內。所以，如果要生成多行文本，只有調用多次fillText方法。

（4）繪制圓形和扇形

arc方法用來繪制扇形。

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

arc方法的x和y參數是圓心坐標，radius是半徑，startAngle和endAngle則是扇形的起始角度和終止角度（以弧度表示），anticlockwise表示做圖時應該逆時針畫（true）還是順時針畫（false）。

下面是如何繪制實心的圓形。

ctx.beginPath(); ctx.arc(60, 60, 50, 0, Math.PI*2, true); ctx.fillStyle = "#000000"; ctx.fill();

繪制空心圓形的例子。

ctx.beginPath(); ctx.arc(60, 60, 50, 0, Math.PI*2, true); ctx.lineWidth = 1.0; ctx.strokeStyle = "#000"; ctx.stroke();

（5）設置漸變色

createLinearGradient方法用來設置漸變色。

var myGradient = ctx.createLinearGradient(0, 0, 0, 160); myGradient.addColorStop(0, "#BABABA"); myGradient.addColorStop(1, "#636363");

createLinearGradient方法的參數是(x1, y1, x2, y2)，其中x1和y1是起點坐標，x2和y2是終點坐標。通過不同的坐標值，可以生成從上至下、從左到右的漸變等等。

使用方法如下：

ctx.fillStyle = myGradient; ctx.fillRect(10,10,200,100);

（6）設置陰影

一系列與陰影相關的方法，可以用來設置陰影。

ctx.shadowOffsetX = 10; // 設置水平位移 ctx.shadowOffsetY = 10; // 設置垂直位移 ctx.shadowBlur = 5; // 設置模糊度 ctx.shadowColor = "rgba(0,0,0,0.5)"; // 設置陰影顏色 ctx.fillStyle = "#CC0000"; ctx.fillRect(10,10,200,100);

圖像處理方法

drawImage方法

canvas允許將圖像文件插入畫布，做法是讀取圖片后，使用drawImage方法在畫布內進行重繪。

var img = new Image(); img.src = "image.png"; ctx.drawImage(img, 0, 0); // 設置對應的圖像對象，以及它在畫布上的位置

上面代碼將一個PNG圖像載入canvas。

由於圖像的載入需要時間，drawImage方法只能在圖像完全載入后才能調用，因此上面的代碼需要改寫。

var image = new Image(); image.onload = function() { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; canvas.getContext("2d").drawImage(image, 0, 0); return canvas; } image.src = "image.png";

drawImage()方法接受三個參數，第一個參數是圖像文件的DOM元素（即img標簽），第二個和第三個參數是圖像左上角在Canvas元素中的坐標，上例中的（0, 0）就表示將圖像左上角放置在Canvas元素的左上角。

getImageData方法，putImageData方法

getImageData方法可以用來讀取Canvas的內容，返回一個對象，包含了每個像素的信息。

var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

imageData對象有一個data屬性，它的值是一個一維數組。該數組的值，依次是每個像素的紅、綠、藍、alpha通道值，因此該數組的長度等於 圖像的像素寬度 x 圖像的像素高度 x 4，每個值的范圍是0–255。這個數組不僅可讀，而且可寫，因此通過操作這個數組的值，就可以達到操作圖像的目的。修改這個數組以后，使用putImageData方法將數組內容重新繪制在Canvas上。

context.putImageData(imageData, 0, 0);

toDataURL方法

對圖像數據做出修改以后，可以使用toDataURL方法，將Canvas數據重新轉化成一般的圖像文件形式。

function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; }

上面的代碼將Canvas數據，轉化成PNG data URI。

save方法，restore方法

save方法用於保存上下文環境，restore方法用於恢復到上一次保存的上下文環境。

ctx.save(); ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 10; ctx.shadowBlur = 5; ctx.shadowColor = "rgba(0,0,0,0.5)"; ctx.fillStyle = "#CC0000"; ctx.fillRect(10,10,150,100); ctx.restore(); ctx.fillStyle = "#000000"; ctx.fillRect(180,10,150,100); 

上面代碼先用save方法，保存了當前設置，然后繪制了一個有陰影的矩形。接着，使用restore方法，恢復了保存前的設置，繪制了一個沒有陰影的矩形。

動畫

利用JavaScript，可以在canvas元素上很容易地產生動畫效果。

var posX = 20, posY = 100; setInterval(function() { context.fillStyle = "black"; context.fillRect(0,0,canvas.width, canvas.height); posX += 1; posY += 0.25; context.beginPath(); context.fillStyle = "white"; context.arc(posX, posY, 10, 0, Math.PI*2, true); context.closePath(); context.fill(); }, 30); 

上面代碼會產生一個小圓點，每隔30毫秒就向右下方移動的效果。setInterval函數的一開始，之所以要將畫布重新渲染黑色底色，是為了抹去上一步的小圓點。

通過設置圓心坐標，可以產生各種運動軌跡。

先上升后下降。

var vx = 10, vy = -10, gravity = 1; setInterval(function() { posX += vx; posY += vy; vy += gravity; // ... }); 

上面代碼中，x坐標始終增大，表示持續向右運動。y坐標先變小，然后在重力作用下，不斷增大，表示先上升后下降。

小球不斷反彈后，逐步趨於靜止。

var vx = 10, vy = -10, gravity = 1; setInterval(function() { posX += vx; posY += vy; if (posY > canvas.height * 0.75) { vy *= -0.6; vx *= 0.75; posY = canvas.height * 0.75; } vy += gravity; // ... }); 

上面代碼表示，一旦小球的y坐標處於屏幕下方75%的位置，向x軸移動的速度變為原來的75%，而向y軸反彈上一次反彈高度的40%。

像素處理

通過getImageData方法和putImageData方法，可以處理每個像素，進而操作圖像內容。

假定filter是一個處理像素的函數，那么整個對Canvas的處理流程，可以用下面的代碼表示。

if (canvas.width > 0 && canvas.height > 0) { var imageData = context.getImageData(0, 0, canvas.width, canvas.height); filter(imageData); context.putImageData(imageData, 0, 0); }

以下是幾種常見的處理方法。

灰度效果

灰度圖（grayscale）就是取紅、綠、藍三個像素值的算術平均值，這實際上將圖像轉成了黑白形式。假定d[i]是像素數組中一個象素的紅色值，則d[i+1]為綠色值，d[i+2]為藍色值，d[i+3]就是alpha通道值。轉成灰度的算法，就是將紅、綠、藍三個值相加后除以3，再將結果寫回數組。

grayscale = function (pixels) { var d = pixels.data; for (var i = 0; i < d.length; i += 4) { var r = d[i]; var g = d[i + 1]; var b = d[i + 2]; d[i] = d[i + 1] = d[i + 2] = (r+g+b)/3; } return pixels; };

復古效果

復古效果（sepia）則是將紅、綠、藍三個像素，分別取這三個值的某種加權平均值，使得圖像有一種古舊的效果。

sepia = function (pixels) { var d = pixels.data; for (var i = 0; i < d.length; i += 4) { var r = d[i]; var g = d[i + 1]; var b = d[i + 2]; d[i] = (r * 0.393)+(g * 0.769)+(b * 0.189); // red d[i + 1] = (r * 0.349)+(g * 0.686)+(b * 0.168); // green d[i + 2] = (r * 0.272)+(g * 0.534)+(b * 0.131); // blue } return pixels; };

紅色蒙版效果

紅色蒙版指的是，讓圖像呈現一種偏紅的效果。算法是將紅色通道設為紅、綠、藍三個值的平均值，而將綠色通道和藍色通道都設為0。

red = function (pixels) { var d = pixels.data; for (var i = 0; i < d.length; i += 4) { var r = d[i]; var g = d[i + 1]; var b = d[i + 2]; d[i] = (r+g+b)/3; // 紅色通道取平均值 d[i + 1] = d[i + 2] = 0; // 綠色通道和藍色通道都設為0 } return pixels; };

亮度效果

亮度效果（brightness）是指讓圖像變得更亮或更暗。算法將紅色通道、綠色通道、藍色通道，同時加上一個正值或負值。

brightness = function (pixels, delta) { var d = pixels.data; for (var i = 0; i < d.length; i += 4) { d[i] += delta; // red d[i + 1] += delta; // green d[i + 2] += delta; // blue } return pixels; };

反轉效果

反轉效果（invert）是指圖片呈現一種色彩顛倒的效果。算法為紅、綠、藍通道都取各自的相反值（255-原值）。

invert = function (pixels) { var d = pixels.data; for (var i = 0; i < d.length; i += 4) { d[i] = 255 - d[i]; d[i+1] = 255 - d[i + 1]; d[i+2] = 255 - d[i + 2]; } return pixels; };