HTML5 Canvas API詳解

html5 是一個新興标準，它正在以越來越快的速度替代久經考驗的 html4。html5 是一個 w3c “工作草案” — 意味着它仍然處于開發階段 — 它包含豐富的元素和屬性，它們都支援現行的 html 4.01 版本規範。它還引入了幾個新元素和屬性，它們适用許多使用 web 頁面的領域 — 音頻、視訊、圖形、資料存儲、内容呈現，等等。本文主要關注圖形方面的增強：canvas。

新的 html5 canvas 是一個原生 html 繪圖簿，用于 javascript 代碼，不使用第三方工具。跨所有 web 浏覽器的完整 html5 支援還沒有完成，但在新興的支援中，canvas 已經可以在幾乎所有現代浏覽器上良好運作了，但 windows® internet explorer® 除外。幸運的是，一個解決方案已經出現，将 internet explorer 也包含進來。

本質上，canvas 元素是一個白闆，直到您在它上面 “繪制” 一些可視内容。與擁有各種畫筆的藝術家不同，您使用不同的方法在 canvas 上作畫。您甚至可以在 canvas 上建立并操作動畫，這不是使用畫筆和油彩所能夠實作的。

canvas api（畫布）用于在網頁實時生成圖像，并且可以操作圖像内容，基本上它是一個可以用javascript操作的位圖（bitmap）。

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

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

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

繪制路徑

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

繪制矩形

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

繪制文本

filltext(string, x, y) 用來繪制文本，它的三個參數分别為文本内容、起點的x坐标、y坐标。使用之前，需用font設定字型、大小、樣式（寫法類似與css的font屬性）。與此類似的還有stroketext方法，用來添加空心字。

繪制圓形和扇形

arc方法用來繪制扇形

設定漸變色

createlineargradient方法用來設定漸變色。

設定陰影

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

如有不懂，請加qq群：135430763共同學習！