第2章 Canvas API canvas(畫布)
Canvas APl 很酷，可以通過它來動態生成和展示圖形、圖表、圖像以及動畫
2.1 HTML5 Canvas 概述
討論 HTML5 Canvas API 中那些我們認為是最常用的功能
2.1.1 歷史 <略>
2.1.2 canvas 是什麼
創建一塊矩形區域 。默認情況下該矩形區域寬為 300 像素，高為 150 像素，但也可以自定義具體的大小或者設置 canvas 元素的其他特性。
使用 canvas 編程，首先要獲取其上下文(context) 。接著在上下文中執行動作，最後將這些動作應用到上下文中。可以將 canvas 的這種編輯方式想象成為數據庫事務:開發人員先發起一個事務，然後執行某些操作，最後提交事務。2.1.3 canvas 坐標
canvas 中的坐標是從左上角開始的 軸沿著水平方向〈按像素)向右延伸，軸沿垂直方向向下延伸。左上角坐標為 x=0, y=0 的點稱作原點。
2.1.4 什麼情況下不用 canvas
用 canvas 元素在 HTML 頁面中動態繪製所有不同的標題，就不如直接使用標題樣式標籤( Hl 田等)，它們所實現的效果是一樣的
2.1.5 替代內容
如果瀏覽器不支持 canvas 元素，或者不支持 HTML5 Canvas API 中的某些特性，那麼開發人員最好提供一份替代代碼。例如，開發人員可以通過一張替代圖片或者一些說明性的文字告訴訪問者，使用最新的瀏覽器可以獲得更佳的瀏覽效果。
( 例 )
<canvas>
Updata your browser to enjoy canvas !
</canvas>
替代程式
可以考慮使用 SVG 代替 Canvas API。 SVG 也能用於繪製，而且它整合了瀏覽器的 DOM。
2.1.6 CSS 和 canvas context亦同
canvas 元素也可以通過應用 CSS 的方式來增加邊框，設置內邊距、外邊距等，而且一些 CSS 屬性還可以被 canvas 內的元素繼承。比如字體樣式，在 canvas 內添加的文字，其樣式默認同 canvas 元素本身是一樣的。
2.1.7 瀏覽器對 HTML5 Canvas 的支持情況
在使用 Canvas API 之前，我們還是應該首先檢測當前瀏覽器是否支持 HTML5 Canvaso。
2.2 使用 HTML5 Canvas APl
2.2.1 檢測瀏覽器支持情況
2.2.2 在頁面中加入 canvas
插到head與body都可以
ID的使用
<canvas id="diagonal" style="border: 1px solid;" width="200" height="200">
</canvas>
代碼清單 2-5 顯示外框
代碼清單 2-6 真正繪圖
01.通過引用 canvasID 值來獲取對 canvas 但對象的訪問權。(例)這段代碼中ID就是 diagonal
02.接著定義一個 context 變量，調用 canvas 對象的 getContext 方法，並傳人希望使用的 canvas 類型。
代碼清單中通過傳入 "2d" 來獲取一個二維上下文，這也是到目前為止唯一可用的上下文。
03.調用了三個方法 -beginPath、moveTo和 lineTo ，傳入了這條線的起點和終點的坐標。方法 moveTo和 lineTo 實際上並不畫線，而是在結束 canvas 操作的時候，通過調用context. stroke() 方法完成線條的繪製。02.接著定義一個 context 變量，調用 canvas 對象的 getContext 方法，並傳人希望使用的 canvas 類型。
代碼清單中通過傳入 "2d" 來獲取一個二維上下文，這也是到目前為止唯一可用的上下文。
<body>
<canvas id="diagonal" style="border:1px solid;" height="200" width="200"></canvas>
<script>
function drawDiagonal() {
// Get the canvas element and its drawing context
var canvas = document.getElementById('diagonal');
var context = canvas.getContext('2d');
// Create a path in absolute coordinates
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
// Stroke the line onto the canvas
context.stroke();
}
window.addEventListener("load", drawDiagonal, true);
</script>
</body>
2.2.3 變換
01. 介於開發人員發出的指令和 canvas 顯示結果之間的一個修正層。
02. 修正 - 在繪製系統中的說法是交換 - 在應用的時候可以被順序應用、組合或者隨意修改。
03. 關於可重用代碼有一條重要的建議：一般繪製都應從原點(坐標系中的 0,0 點)開始，應用變換 (縮放、平移、旋轉等) ，然後不斷修改代碼直至達到希望的效果。
2.2.4 路徑
資料來源：HTML5 高級程序設計(柳靖，李杰，劉淼)
沒有留言:
張貼留言