【翻譯】The HTML5 Canvas Handbook【持續翻譯中】（第三次更新）

前言

HTML5 中引入了 canvas 元素，canvas 是動態生成位圖圖像（bitmap）的 JavaScript 框架。

基本的設置有點複雜，所涉及的對象本身設計得很差，這也是標準演變過程的實際縮減的結果。而 Canvas 元素值得我們學習和練習的原因是：它是 HTML 中圖形（graphics）和視頻等未來元素，單單這點就足以證明它的強大，不光如此，結合其自然棲息地的完整的腳本語言，它使得 JavaScript 語言更加靈活、能夠滿足全部的要求。

JavaScript對象的接口很混亂，操作沒有正確地分隔，方法的效果取決於奇怪的副作用和屬性設置。但是這些接口很小:內容表（contents table）的Part 2（待翻譯部分）已經提供了完整的摘要和概述。這樣減少到不到 20 個屬性和 35 個方法，就可以管理和理解 canvas 元素的全部特性。有了 HTML、CSS 和一點 JavaScript 知識，這個 Canvas 手冊足夠入門和日常工作的使用了。

概述

這本手冊由三個部分組成：

1、簡介

canvas元素的初體驗、簡單示例和基本設置。

2、完整介紹

這部分是 Canvas 手冊中最大的部分，涉及到的兩個主要JavaScript對象的全面參考:

1.HTMLCanvasElement和2.CanvasRenderingContext2D。

可以將第二部分看作畫布元素的官方[W3C]標準的用戶友好版本。屬性和方法的結構如文檔的參考摘要所示。

3、其他部分

對於CSS的一些元素，HTML5文件模板和部分額外工具和工具構建的說明。

 

如果您是初學者，請先閱讀第一部分，然後通過瀏覽第二部分以找到您需要的部分（接口或方法）。

 

與此文檔相關的網絡資源：

【主頁】這篇文檔的最新版本

【論壇】是關於此文檔和 canvas 主題的一個互動頁面。

鳴謝

有一些很好的在線資源讓我得以瞭解 canvas，特別是 Mozilla Developer Network的Canvas tutorial教程。

本手冊（英文版手冊）是用 Markdown 編寫的，並通過出色的 Pandoc 通用文檔轉換器轉換成HTML。

1. 簡介

1.1 正式標準

以下是描述和定義 canvas 元素的官方文件：

[W3C]：這部分是W3C (World Wide Web Consortium) 定義 HTML5 標準和 Canvas 元素的段落。

[WHATWG]：這部分是 (Web Hypertext Application Technology Working Group) 的Web應用程序規範草案的一部分，其中 canvas 元素部分沿用的標準是最初投入使用時的標準。

[W3C/2D]：這部分是HTML canvas 2D Context 的W3C描述

1.2 要求：支持 HTML5 和 JavaScript 的瀏覽器

canvas 元素是 HTML5 的一部分。如果你當前使用的瀏覽器因版本太舊或其他原因無法應用 HTML5標準，那麼同樣無法使用 canvas元素。

關於瀏覽器對 HTML5 、特別是 canvas 元素的支持，詳情可以在 caniuse.com 上找到。

此外，您的瀏覽器必須能夠並允許執行 JavaScript 代碼。幾年前，JavaScript 以惹惱用戶而聞名，在許多配置中，它被默認關閉。但是所有這些都是過去的事情了，如果你不想錯過 HTML5 的全部特性，尤其是canvas元素，就讓那些不愉快的事情就此遠去吧。

要理解這段文本，請確保您的瀏覽器是最新的，並且配置正確(請參閱下面的第一個示例作爲測試，以確保它能正常工作)。所有的插圖和示例都不是作爲 <img> 插入的，而是使用canvas元素插入的。

1.3 第一個示例

問候小盒

這是一個 canvas 圖片示例，在紅盒子裏展示了一個 “Hello” 問候語。

此圖的源代碼如下：

<canvas id="VeryFirstExampleCanvas" width=150 height=60>
  GO AND UPDATE YOUR BROWSER BEFORE YOU READ ON!
</canvas>

<script>
  var canvas = document.getElementById ('VeryFirstExampleCanvas');    // access the canvas object
  var context = canvas.getContext ('2d');                             // access the canvas context
  context.fillStyle = 'red';                                          // set the color to 'red'
  context.fillRect (0,0,150,60);                                      // draw a red box on the whole of the canvas
  context.fillStyle = 'yellow';                                       // set the color to 'yellow'
  context.fillRect (5,5,140,50);                                      // draw a yellow box inside the red one
  context.fillStyle = 'red';                                          // set the color back to 'red'
  context.font = '40pt Arial';                                        // define the CSS font for writing text
  context.fillText ('Hello',10,50);                                   // write the text 'Hello'
</script>

這個小示例已經包含了所有的基本成分和步驟，我們將在後面一遍又一遍地重複這些步驟。每個普通的 canvas 圖片都有兩部分代碼：

1、第一部分是 <canvas>...</canvas> 部分，它是 HTML 文件的一部分，代碼位於圖片展示位置。

canvas 擁有 width 與 height（原文寫 length 有誤）兩個屬性，他們以像素爲單位來定義矩形圖片的尺寸。在例子中使用的是 150px 的寬度與 60px 的高度。

<canvas>..</canvas> 標籤內的文本並不是 canvas 的內容，它只是一個所謂的“後退（fallback）”信息。這裏的信息只在瀏覽器無法處理 canvas 元素時會展示的。

2、代碼的第二部分是 JavaScript 腳本。在本例中，它被直接放在 <script>…< / script> 標記。這個代碼部分的位置是相當任意的，它經常被存放到單獨的.js文件中。該腳本通常執行三個步驟：

1、加載HTML <canvas> 標籤成爲 HTMLCanvasElement 對象。我們通過調用下列代碼將其保存在一個名爲 canvas 的變量中

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

2、該圖不是直接在 HTMLCanvasElement 中生成的，而是在它所謂的上下文中生成的，一個內部 CanvasRenderingContext2D 對象，我們通過調用下列代碼將其保存在另一個名爲 context 的變量中

var context = canvas.getContext('2d');

現在，通過修改屬性和調用方法，剩下的全部代碼都設置爲在 canvas 上“繪製素材”：

context.fillStyle = 'red';          // set the color to 'red'
context.fillRect (0,0,150,60);      // draw a red box on the whole of the canvas
context.fillStyle = 'yellow';       // set the color to 'yellow'
context.fillRect (5,5,140,50);      // draw a yellow box inside the red on
context.fillStyle = 'red';          // set the color back to 'red'
context.font = '40pt Arial';        // define the CSS font for writing text
context.fillText ('Hello',10,50);   // write the text 'Hello'

上下文是生成圖片內容的地方，描述其屬性和方法是本手冊的主要部分。但是爲了使用canvas元素，我們需要理解這些生成 canvas 的基本步驟。

三色旗

我們來再次練習同樣的步驟，這次我們試着產生法國國旗。

源碼如下：

<canvas id="LittleTricolour" width=120 height=90> Your browser still doesn't work! </canvas>
<script>
  // First, get hold of the canvas object and its context
  var tricolourCanvas = document.getElementById('LittleTricolour');    // access the canvas object
  var tricolourCanvasContext = tricolourCanvas.getContext('2d');       // access the canvas context
  // Now do the real drawings:
  tricolourCanvasContext.fillStyle = '#0055A4';    // set the color to blue
  tricolourCanvasContext.fillRect ( 0, 0, 40, 90); // draw a blue rectangle on the left
  tricolourCanvasContext.fillStyle = '#FFFFFF';    // set the color to white
  tricolourCanvasContext.fillRect (40, 0, 40, 90); // draw a white rectangle in the middle
  tricolourCanvasContext.fillStyle = '#EF4135';    // set the color to red
  tricolourCanvasContext.fillRect (80, 0, 40, 90); // draw a red rectangle on the right    
</script>

所有的可視圖片元素都是在canvas上下文中生成的，並存儲在JavaScript變量tricolourCanvasContext中。

1.4 基本安裝

每個 canvas 元素 都由兩個截然不同的部分組成：

<canvas>標記，即<canvas>…結構，它是HTML代碼的一部分

HTMLCanvasElement 對象，它是一個合適的 JavaScript 對象，包含另一個所謂的上下文對象，實際的圖片元素在其中生成。

這種 HTML 標記和 JavaScript 對象的雙重特性並不特定於 canvas 元素，它對於整個 DOM (文檔對象模型)的設計非常重要，DOM 支持通過 JavaScript 對文檔進行動態操作

<canvas>標記

有時候，<canvas> 與 <img> 一樣是用來展示圖片的。如下：

<img src="horse.jpg" width=100 height=100 alt="SOMETHING GOES WRONG" style="border: solid 5pt orange"> </img>

在瀏覽器中生成以下圖像

我們用寬度和高度來設置圖片的大小。(回想一下，在每種情況下100都是“100px”的縮寫。)使用 alt 屬性，我們提供了一些“替代”或回退文本，在圖像因任何原因無法顯示的情況下，這些文本將出現。HTML元素的通用樣式屬性用於設置一些CSS屬性。在這個例子中，它在圖片周圍畫了一個橙色的邊框。當然，我們可以忽略結束</img>標記。

<canvas> 標記有同樣的特點。如下：

<canvas width=100 height=100 style="border: solid 5pt orange"> SOMETHING GOES WRONG </canvas>

樣式如下：

width 與 height 是唯二的可在 <canvas> 標籤上設置的屬性，style 屬性是 HTML 元素的通用屬性，我們在 canvas 元素周圍放置了一個橘色框架。如果我們忽略了這個屬性，我們根本無法正確地看到 canvas 元素。

與<img>的 alt 屬性不同，<canvas> 的回退內容並不位於屬性中，而是位於 <canvas>...</canvas> 標籤中。

順便說一下，width 和 height 實際上可以省略，默認情況下 width 爲 300px，height 爲 150px。如下：

<canvas style="border: solid 5pt orange"> </canvas>

展示如下：

style屬性是所有HTML標記添加一些CSS特性的通用選項。但實際上，canvas 元素的實際圖片內容並不是在這裏繪製的。這是在所謂的canvas context 中完成的。

canvas 對象及其 2d context

canvas 的真實圖形內容和圖片元素既不在屬性中，也不在<canvas>…< /canvas>中。它不是用HTML或CSS編寫的。相反，它是在所謂的canvas context中完成的，並且這個context中只能在JavaScript中訪問和修改

在屏幕上顯示canvas圖片的方法有很多。事實上，它甚至可以完全在JavaScript中完成，根本不涉及<canvas>標記。但是我們不打算深入研究JavaScript DOM並傳播一個標準方法，相反，在大多數情況下，文章內容應該足夠了。

標準方法如下：

• 在我們的HTML文件中，我們放置了一個<canvas>…</canvas>標記，該標記位於canvas圖像應該出現的位置
• 我們使用任意名稱附加id屬性(在本例中是myCan)。注意不要對多個標記使用相同的名稱，即爲每個其他畫canvas布提供不同的ID。
• 然後，通過調用來訪問表示DOM中的畫布元素的畫布對象

document.getElementById('myCan');

這個對象是HTMLCanvasElement類型的JavaScript對象。默認情況下，我們通過調用將一個名稱(通常是canvas，但myCan、canvasNo27等也同樣可能)附加到該對象

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

通過這種方式，我們可以在腳本里輕鬆地訪問它。

• 現在我們需要通過調用getContext('2d')來獲得這個canvas對象的2d上下文。同樣，我們立即爲它附加一個名稱，通常是context(其他作者更喜歡ctx或其他)。這是我們的下一行代碼

var context = canvas.getContext('2d');

注意，我們會得到與這一行相同的結果:

var context = document.getElementById('myCan').getContext('2d');

當然，使用canvas變量作爲canvas對象的句柄要方便得多。