Canvas 教程

在本文章中

1. 在你開始以前

2. 教程內容

3. 相關資料

4. A note to contributors

<canvas> 是一種能夠經過編寫腳本（一般是JavaScript）來實現繪製圖形的HTML元素。例如，它能用來繪製圖形，製做組合圖像或者生成簡單的 (偶爾 也不簡單) 動畫。右邊的圖像展現了<canvas>實現的一些例子，在接下來的教程中咱們將會實現它們。

<canvas>第一次出現是被蘋果在Mac OS X儀表盤中實現，以後就被應用到Safari和谷歌Chrome中。Gecko1.8及以上的瀏覽器，好比火狐1.5，一樣也支持這個元素。<canvas>標籤是WhatWG Web applications 1.0標準化即HTML5的一部分。本教程從基礎入手，講述瞭如何使用<canvas>標籤來繪製2D圖像。提供的例子應該會使你瞭解你可以經過canvas作到的事情而且將會提供一些幫助你開始創建本身的內容的代碼片斷。

在你開始以前

使用<canvas>元素並無你想象的那麼難，可是你仍然須要對HTML和JavaScript有 必定的瞭解。<canvas>元素在某些過舊的瀏覽器中是不被支持的，可是全部主流瀏覽器的最新版本都已經支持了該元素。canvas的默認 大小是300像素*150像素（寬*高）。可是能夠經過使用CSS寬高屬性來自定義其大小。爲了在canvas中繪製圖像咱們會使用一個 javascript內容對象（javascript context object這應該如何翻譯），它將會建立一個動態圖像。

教程內容

• 基本使用

• 繪製圖像

• 使用圖像

• 添加格式和顏色

• 轉換

• 合成

• 動畫基礎

• 優化 canvas

相關資料

• Canvas topic page

• Drawing Graphics with Canvas

• Canvas examples

• HTML5 Tutorial

• Drawing Text Using a Canvas

• Adding Text to Canvas

• Canvas Demos - Games, applications, tools and tutorials

• Canvas Drawing and Animation Application

• Interactive canvas tutorial

• Canvas Cheat Sheet with all attributes and methods

• Adobe Illustrator to Canvas plug-in

• HTML5CanvasTutorials

• How to draw N grade Bézier curves with the Canvas API

• 31 days of canvas tutorials

• W3C Standard

• HTML5 Canvas tutorials and reference