參考
Canvas的基本用法
HTML5 Canvas
HTML5 Tricks
知識(shí)點(diǎn)
<canvas>元素
定義
用于繪制圖形，需要結(jié)合腳本來(lái)實(shí)現(xiàn)，即是canvas元素是繪制圖形的容器，需要利用腳本來(lái)實(shí)現(xiàn)圖形的繪制；
屬性
canvas元素實(shí)際只有： width,height兩個(gè)屬性，但可以通過(guò)DOM Property來(lái)設(shè)置；
注意：
若是創(chuàng)建
canvas元素時(shí)未指定高度和寬度，則會(huì)一默認(rèn)的尺寸（寬：300px, 高： 150px）；canvas的尺寸也可以通過(guò)CSS來(lái)設(shè)置，但在繪制時(shí)圖像會(huì)伸縮以適應(yīng)它的框架尺寸：如果CSS的尺寸與初始畫(huà)布的比例不一致，它會(huì)出現(xiàn)扭曲，出現(xiàn)這種情況，嘗試設(shè)置canvas的寬度和高度，不適用CSS;
canvas VS img
-
canvas沒(méi)有src,alt屬性； -
canvas元素是雙標(biāo)簽元素，必須閉合，若缺少閉合標(biāo)簽，文檔的其余內(nèi)容會(huì)被認(rèn)為是替代內(nèi)容（瀏覽器不支持canvas元素時(shí)顯示的內(nèi)容），不會(huì)顯示；而img是單標(biāo)簽元素；
渲染上下文（The rendering context）
<canvas>元素創(chuàng)造了一個(gè)固定大小的畫(huà)布，它公開(kāi)了一個(gè)或多個(gè)渲染上下文，其可以用來(lái)繪制和處理要展示的內(nèi)容。
默認(rèn)情況下，canvas創(chuàng)建的畫(huà)布是空白的，故在使用時(shí)，需要執(zhí)行下述操作：
- 獲取DOM對(duì)象
<canvas id="myCanvas" width="800" height="800"></canvas>
var myCanvas = document.getElementById('myCanvas');
- 通過(guò)'canvas'的
getContext()方法獲取渲染上下文及其繪畫(huà)功能
var oContext = myCanvas .getContext('2d');
說(shuō)明：getContext()只有一個(gè)參數(shù)，上下文的格式;
檢測(cè)瀏覽器是否支持
var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// 其他操作
} else {
// 不支持的操作
}
canvas柵格畫(huà)布及空間坐標(biāo)系
Canvas的坐標(biāo)以左上角為原點(diǎn)(0,0)，水平向右為X軸，垂直向下為Y軸，以像素為單位，所以每個(gè)點(diǎn)都是非負(fù)整數(shù)
柵格畫(huà)布中每個(gè)單元格相當(dāng)于canvas元素中的1px；
作者：小人物的秘密花園
鏈接：http://www.itdecent.cn/p/22e39490fc4c
來(lái)源：簡(jiǎn)書(shū)
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
