今天早上看了一下 canvas 前端畫圖，數據可視化， 百度的 echart.js , d3等 js 庫都已經提供了強大的繪制各種圖形的 API。
下面記錄一下 有關canvas 繪圖的基本知識：
<html>
<head >
<script src ='./aop.js'></script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
/*var path1 = new Path2D();
path1.rect(10, 10, 100,100);
ctx.stroke(path1);*/
ctx.rect(10, 10, 200,100);
ctx.stroke();
</script>
</body>
</html>
Canvas是HTML5新增的組件，它就像一塊幕布，可以用JavaScript在上面繪制各種圖表、動畫等。
沒有Canvas的年代，繪圖只能借助Flash插件實現，頁面不得不用JavaScript和Flash進行交互。有了Canvas，我們就再也不需要Flash了，直接使用JavaScript完成繪制。
一個Canvas定義了一個指定尺寸的矩形框，在這個范圍內我們可以隨意繪制：
<canvas id="test-canvas" width="300" height="200"></canvas>
由於瀏覽器對HTML5標准支持不一致，所以，通常在<canvas>內部添加一些說明性HTML代碼，如果瀏覽器支持Canvas，它將忽略<canvas>內部的HTML，如果瀏覽器不支持Canvas，它將顯示<canvas>內部的HTML：
<canvas id="test-stock" width="300" height="200">
<p>你的瀏覽器不支持Canvas</p>
</canvas>
在使用Canvas前，用canvas.getContext來測試瀏覽器是否支持Canvas：
<!-- HTML代碼 -->
<canvas id="test-canvas" width="200" heigth="100">
<p>你的瀏覽器不支持Canvas</p>
</canvas>
<script>
"use strict";
var canvas = document.getElementById('test-canvas');
if (canvas.getContext) {
alert('你的瀏覽器支持Canvas!');
} else {
alert('你的瀏覽器不支持Canvas!');
}
</script>
HTML5 <canvas> 標簽用於繪制圖像（通過腳本，通常是 JavaScript）。
不過，<canvas> 元素本身並沒有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實際的繪圖任務。
getContext() 方法可返回一個對象，該對象提供了用於在畫布上繪圖的方法和屬性。
本手冊提供完整的 getContext("2d") 對象屬性和方法，可用於在畫布上繪制文本、線條、矩形、圓形等等。
顏色、樣式和陰影
| 屬性 | 描述 |
|---|---|
| fillStyle | 設置或返回用於填充繪畫的顏色、漸變或模式 |
| strokeStyle | 設置或返回用於筆觸的顏色、漸變或模式 |
| shadowColor | 設置或返回用於陰影的顏色 |
| shadowBlur | 設置或返回用於陰影的模糊級別 |
| shadowOffsetX | 設置或返回陰影距形狀的水平距離 |
| shadowOffsetY | 設置或返回陰影距形狀的垂直距離 |
| 方法 | 描述 |
|---|---|
| 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() |