《版本支持》

最新標(biāo)準(zhǔn)：http://www.w3.org/TR/2dcontext/

穩(wěn)定版本的標(biāo)準(zhǔn)：http://www.w3.org/TR/2013/CR-2dcontext-20130806/

?{s??vh?^d

注意的知識點：

01浴韭、

用JavaScript創(chuàng)建img對象

第一種方式：

var img = document.getElementById("imgId");

第二種方式：

var img = new Image();//這個就是img標(biāo)簽的dom對象

img.src = "imgs/arc.gif";

img.alt = "文本信息";

img.onload = function() {

//圖片加載完成后疾嗅，執(zhí)行此方法

}

2.1.1 canvas標(biāo)簽語法和屬性 （重點）

canvas：畫布油布的意思 英 ['k?nv?s] 美 ['k?nv?s]

標(biāo)簽名：canvas荣堰，雙標(biāo)簽忧勿，需要閉合。

單位： px许起，可以設(shè)置width和height屬性篡腌，否則忽略單位学歧。

width和hegiht：默認(rèn)300*150像素

注意：

不要用CSS控制它的寬和高,會導(dǎo)致內(nèi)部圖片被拉伸，

重新設(shè)置canvas標(biāo)簽的寬高屬性會讓畫布擦除所有的內(nèi)容茸苇，

可以給canvas畫布設(shè)置背景色

2.1.2 瀏覽器不兼容處理（重點）

ie9以上才支持canvas, 其他chrome排苍、Safari、Opera等都支持

只要瀏覽器兼容canvas学密，那么就會支持絕大部分api(個別最新api除外)

移動設(shè)備幾乎支持Canvas的所有API

2d的支持的都非常好淘衙，3d（webgl）ie11才支持，其他都支持

如果瀏覽器不兼容腻暮，最好進(jìn)行友好提示, 例如：

你的瀏覽器不支持canvas彤守，請升級瀏覽器.瀏覽器不支持，顯示此行文本

如果瀏覽器不兼容哭靖，可以使用flash等方式進(jìn)行替換具垫。

2.2.1 Context：Canvas的上下文、繪制環(huán)境试幽。（重點掌握）

上下文：是所有的繪制操作api的入口或者集合筝蚕。

Canvas自身無法繪制任何內(nèi)容，Canvas的繪圖是使用JS調(diào)用Canvas的接口來完成的。

Context對象就是JavaScript操作Canvas的接口起宽。 *使用[CanvasElement].getContext(‘2d’)來獲取2D繪圖上下文蔗坯。

//獲得畫布

var canvas ?= document.getElementById( 'cavsElem' );

//注意：2d小寫，二維燎含， 3d：webgl

var ctx = canvas.getContext( '2d' );

2.3.2 設(shè)置繪制起點(moveTo)

* 語法：ctx.moveTo(x, y);

* 解釋：設(shè)置上下文繪制路徑的起點宾濒。相當(dāng)于移動畫筆到某個位置

* 參數(shù)：x,y 都是相對于 canvas盒子的最左上角。

* 注意：**繪制線段前必須先設(shè)置起點屏箍，不然繪制無效绘梦。**

2.3.3 繪制直線(lineTo)

* 語法：ctx.lineTo(x, y);

* 解釋：從x,y的位置繪制一條直線到起點或者上一個線頭點。

* 參數(shù)：x,y 線頭點坐標(biāo)赴魁。

2.3.4 路徑開始和閉合

* 開始路徑：ctx.beginPath();

* 閉合路徑：ctx.closePath();

* 解釋：如果復(fù)雜路徑繪制卸奉，必須使用路徑開始和結(jié)束。閉合路徑會自動把最后的線頭和開始的線頭連在一起颖御。

* beginPath: 核心的作用是將 不同繪制的形狀進(jìn)行隔離榄棵，

每次執(zhí)行此方法，表示重新繪制一個路徑,跟之前的繪制的墨跡可以進(jìn)行分開樣式設(shè)置和管理潘拱。

2.3.5 描邊(stroke)

* 語法：ctx.stroke();

* 解釋：根據(jù)路徑繪制線疹鳄。路徑只是草稿，真正繪制線必須執(zhí)行stroke

* stroke: （用筆等）畫芦岂；輕撫瘪弓；輕挪；敲擊禽最；劃尾槳腺怯；劃掉；（打字時）擊打鍵盤

英 [str??k] ? 美 [strok]

canvas繪制的基本步驟：

第一步：獲得上下文 =>canvasElem.getContext('2d');

第二步：開始路徑規(guī)劃 =>ctx.beginPath()

第三步：移動起始點 =>ctx.moveTo(x, y)

第四步：繪制(點川无、線呛占、面、圖片...) =>ctx.lineTo(x, y)

第五步：閉合路徑 =>ctx.closePath();

第六步：繪制描邊 =>ctx.stroke();

html部分：

當(dāng)前瀏覽器不支持canvas懦趋，請升級瀏覽器版本

javascript部分：

//===============基本繪制api====================

//獲得畫布

var canvas = document.querySelector('#canvas');

//獲得上下文

var ctx = canvas.getContext('2d');

canvas.width = 800; ? ? //設(shè)置標(biāo)簽的屬性寬高

canvas.height = 600;

canvas.style.border = "1px solid #000";

//繪制三角形

ctx.beginPath(); ? ? ? ?//開始路徑

ctx.moveTo(100,100); ? ?//三角形晾虑，左頂點

ctx.lineTo(300, 100); ? //右頂點

ctx.lineTo(300, 300); ? //底部的點

ctx.closePath(); ? ? ? ?//結(jié)束路徑

ctx.stroke(); ? ? ? ? ? //描邊路徑

2.3.6 填充(fill)

* 語法：ctx.fill();

* 解釋：填充，是將閉合的路徑的內(nèi)容填充具體的顏色愕够。默認(rèn)黑色走贪。

2.3.7 快速創(chuàng)建矩形rect()方法

* 語法：ctx.rect(x, y, width, height);

* 解釋：x, y是矩形左上角坐標(biāo)， width和height都是以像素計

* rect方法只是規(guī)劃了矩形的路徑惑芭，并沒有填充和描邊坠狡。

* 改造案例：04填充矩形.html

*rect: abbr. 矩形（rectangular）；收據(jù)（receipt）

2.3.8 快速創(chuàng)建描邊矩形和填充矩形

* 語法： ctx.strokeRect(x, y, width, height);

- 參數(shù)跟2.3.8相同遂跟，注意此方法繪制完路徑后立即進(jìn)行stroke繪制

* 語法：ctx.fillRect(x, y, width, height);

- 參數(shù)跟2.3.8相同逃沿， 此方法執(zhí)行完成后婴渡。立即對當(dāng)前矩形進(jìn)行fill填充。

2.3.9清除矩形(clearRect)

* 語法：ctx.clearRect(x, y, width, hegiht);

* 解釋：清除某個矩形內(nèi)的繪制的內(nèi)容凯亮，相當(dāng)于橡皮擦边臼。

《2.4 繪制圓形（arc)》

概述：arc() 方法創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓）。

語法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);

arc: 患傧（度）弧形物柠并；天穹 英 [ɑ?k] 美 [ɑrk]

counter 反擊，還擊富拗；反向移動臼予，對著干；反駁啃沪，回答 ['ka?nt?] 美 ['ka?nt?]

解釋：

x,y：圓心坐標(biāo)粘拾。

r：半徑大小。

sAngle:繪制開始的角度创千。 圓心到最右邊點是0度缰雇，順時針方向弧度增大。

eAngel:結(jié)束的角度追驴，注意是弧度械哟。π

counterclockwise：是否是逆時針。true是逆時針氯檐，false：順時針(默認(rèn))

弧度和角度的轉(zhuǎn)換公式： rad = deg*Math.PI/180;

在Math提供的方法中sin戒良、cos等都使用的弧度

三角函數(shù)的補(bǔ)充

Math.sin(弧度); //夾角對面的邊 和 斜邊的比值

Math.cos(弧度); //夾角側(cè)邊 與斜邊的比值

圓形上面的點的坐標(biāo)的計算公式

x =x0 + Math.cos(rad) * R;//x0和y0是圓心點坐標(biāo)

y =y0 + Math.sin(rad) * R;//注意都是弧度

2.5.1 繪制上下文的文字屬性 （有印象就行了）

2.5.2 上下文繪制文字方法

* ctx.fillText() ? ? ?在畫布上繪制“被填充的”文本

* ctx.strokeText() ? ?在畫布上繪制文本（無填充）

* ctx.measureText() ? 返回包含指定文本寬度的對象

* 單詞：measure 測量体捏；估量冠摄；權(quán)衡 ? 英 ['me??] ? 美 ['m???]

//綜合案例代碼：

ctx.moveTo( 300, 300 );

ctx.fillStyle = "purple"; ? ? ? ? ? ? ? //設(shè)置填充顏色為紫色

ctx.font = '20px "微軟雅黑"'; ? ? ? ? ? //設(shè)置字體

ctx.textBaseline = "bottom"; ? ? ? ? ? ?//設(shè)置字體底線對齊繪制基線

ctx.textAlign = "left"; ? ? ? ? ? ? ? ? //設(shè)置字體對齊的方式

//ctx.strokeText( "left", 450, 400 );

ctx.fillText( "Top-g", 100, 300 ); ? ? ? ?//填充文字

《2.6 繪制圖片（drawImage）》 （重點）

2.6.1 基本繪制圖片的方式

context.drawImage(img,x,y);

參數(shù)說明： x,y 繪制圖片左上角的坐標(biāo)， img是繪制圖片的dom對象几缭。

2.6.2 在畫布上繪制圖像河泳，并規(guī)定圖像的寬度和高度

context.drawImage(img,x,y,width,height);

參數(shù)說明：width 繪制圖片的寬度,

height：繪制圖片的高度

如果指定寬高，最好成比例年栓，不然圖片會被拉伸

等比公式： ?toH = Height * toW ? / ?Width;

設(shè)置的高度 = 原高度 * 設(shè)置的寬度 / 原寬度;

2.6.3 圖片裁剪拆挥，并在畫布上定位被剪切的部分

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

參數(shù)說明：

sx,sy 裁剪的左上角坐標(biāo)，

swidth：裁剪圖片的高度某抓。 sheight:裁剪的高度

其他同上

2.6.4 用JavaScript創(chuàng)建img對象

第一種方式：

var img = document.getElementById("imgId");

第二種方式：

var img = new Image();//這個就是 img標(biāo)簽的dom對象

img.src = "imgs/arc.gif";

img.alt = "文本信息";

img.onload = function() {

//圖片加載完成后纸兔，執(zhí)行此方法

}