HTML5可以用javascript進行圖形的制作，需要聲明一個<canvas>標簽，然后在這個標簽中用javascript利用canvas API進行畫圖，舉例如下:
<canvas id="canvas1" width="200" height="200"><canvas/>
<script type="text/javascript">
var c=document.getElementById("canvas1");//首先用javascript得到這個canvas元素
var cxt=c.getContext("2d");//調用getContext方法得到context對象開始畫圖
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
canvas api 列表如下:
顏色、樣式和陰影
| 方法 |
描述 |
| createLinearGradient() |
創建線性漸變（用在畫布內容上） |
| createPattern() |
在指定的方向上重復指定的元素 |
| createRadialGradient() |
創建放射狀/環形的漸變（用在畫布內容上） |
| addColorStop() |
規定漸變對象中的顏色和停止位置 |
線條樣式
| 屬性 |
描述 |
| lineCap |
設置或返回線條的結束端點樣式 |
| lineJoin |
設置或返回兩條線相交時，所創建的拐角類型 |
| lineWidth |
設置或返回當前的線條寬度 |
| miterLimit |
設置或返回最大斜接長度 |
矩形
| 方法 |
描述 |
| rect() |
創建矩形 |
| fillRect() |
繪制“被填充”的矩形 |
| strokeRect() |
繪制矩形（無填充） |
| clearRect() |
在給定的矩形內清除指定的像素 |
路徑
| 方法 |
描述 |
| fill() |
填充當前繪圖（路徑） |
| stroke() |
繪制已定義的路徑 |
| beginPath() |
起始一條路徑，或重置當前路徑 |
| moveTo() |
把路徑移動到畫布中的指定點，不創建線條 |
| closePath() |
創建從當前點回到起始點的路徑 |
| lineTo() |
添加一個新點，然后在畫布中創建從該點到最后指定點的線條 |
| clip() |
從原始畫布剪切任意形狀和尺寸的區域 |
| quadraticCurveTo() |
創建二次貝塞爾曲線 |
| bezierCurveTo() |
創建三次方貝塞爾曲線 |
| arc() |
創建弧/曲線（用於創建圓形或部分圓） |
| arcTo() |
創建兩切線之間的弧/曲線 |
| isPointInPath() |
如果指定的點位於當前路徑中，則返回 true，否則返回 false |
轉換
| 方法 |
描述 |
| scale() |
縮放當前繪圖至更大或更小 |
| rotate() |
旋轉當前繪圖 |
| translate() |
重新映射畫布上的 (0,0) 位置 |
| transform() |
替換繪圖的當前轉換矩陣 |
| setTransform() |
將當前轉換重置為單位矩陣。然后運行 transform() |
文本
| 屬性 |
描述 |
| font |
設置或返回文本內容的當前字體屬性 |
| textAlign |
設置或返回文本內容的當前對齊方式 |
| textBaseline |
設置或返回在繪制文本時使用的當前文本基線 |
| 方法 |
描述 |
| fillText() |
在畫布上繪制“被填充的”文本 |
| strokeText() |
在畫布上繪制文本（無填充） |
| measureText() |
返回包含指定文本寬度的對象 |
圖像繪制
| 方法 |
描述 |
| drawImage() |
向畫布上繪制圖像、畫布或視頻 |
像素操作
| 屬性 |
描述 |
| width |
返回 ImageData 對象的寬度 |
| height |
返回 ImageData 對象的高度 |
| data |
返回一個對象，其包含指定的 ImageData 對象的圖像數據 |
| 方法 |
描述 |
| createImageData() |
創建新的、空白的 ImageData 對象 |
| getImageData() |
返回 ImageData 對象，該對象為畫布上指定的矩形復制像素數據 |
| putImageData() |
把圖像數據（從指定的 ImageData 對象）放回畫布上 |
合成
| 屬性 |
描述 |
| globalAlpha |
設置或返回繪圖的當前 alpha 或透明值 |
| globalCompositeOperation |
設置或返回新圖像如何繪制到已有的圖像上 |
其他
| 方法 |
描述 |
| save() |
保存當前環境的狀態 |
| restore() |
返回之前保存過的路徑狀態和屬性 |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
