一：canvas簡介

1.1什么是canvas？

①：canvas是HTML5提供的一種新標簽<canvas></canvas>

②：HTML5? <canvas>標簽元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成。

③：<canvas>標簽只是圖形容器，必須使用腳本來繪制圖形。

Canvas是一個矩形區域的畫布，可以用JavaScript在上面繪畫。控制其每一個像素。---其默認在頁面上得的大小是width:300px; ?height:100px;

canvas標簽使用JavaScript在網頁上繪制圖像，本身不具備繪圖功能。

canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

HTML5之前的web頁面只能用一些固定樣式的標簽：比如p、div、h1等，但有了canvas Web頁面可以可以豐富多彩。

1.2 canvas主要應用的領域

1.游戲：canvas在基于Web的圖像顯示方面比Flash更加立體、更加精巧，canvas游戲在流暢度和跨平臺方面更牛。

2.可視化數據.數據圖表話，

3.banner廣告：Flash曾經輝煌的時代，智能手機還未曾出現。現在以及未來的智能機時代，HTML5技術能夠在banner廣告上發揮巨大作用，用Canvas實現動態的廣告效果再合適不過。

4.未來=>模擬器：無論從視覺效果還是核心功能方面來說，模擬器產品可以完全由JavaScript來實現。

5.未來=>遠程計算機控制：Canvas可以讓開發者更好地實現基于Web的數據傳輸，構建一個完美的可視化控制界面。

6.未來=>圖形編輯器：Photoshop圖形編輯器將能夠100%基于Web實現。

7.其他可嵌入網站的內容(多用于活動頁面、特效)：類似圖表、音頻、視頻，還有許多元素能夠更好地與Web融合，并且不需要任何插件。

8.完整的canvas移動化應用

9.canvas的標準：

? 最新標準：http://www.w3.org/TR/2dcontext/

? 穩定版本的標準：http://www.w3.org/TR/2013/CR-2dcontext-20130806/

? 目前來說，標準還在完善中。先用早期的api足夠完成所有的應用

二、canvas繪圖基礎

2.0 sublime配置canvas插件

推薦：

安裝插件：AndyJS2

github地址：https://github.com/malun666/AndyJS2

直接下載到：X:\Users\用戶名\AppData\Roaming\Sublime Text 3\Packages

2.1 Canvas標簽

2.1.1 canvas標簽語法和屬性 （重點）

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

標簽名canvas，需要進行閉合。就是一普通的html標簽。

可以設置width和height屬性，但是屬性值單位必須是px，否則忽略。

width和hegiht：默認300*150像素

注意：

------- 不要用CSS控制它的寬和高,會走出圖片拉伸，

------- 重新設置canvas標簽的寬高屬性會讓畫布擦除所有的內容。?

------- 可以給canvas畫布設置背景色?

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

ie9以上才支持canvas,其他chrome、ff、蘋果瀏覽器等都支持

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

移動端的兼容情況非常理想，基本上隨便使用

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

如果瀏覽器不兼容，最好進行友好提示

例如：

<canvas ? id="myCanvas">

? ? ? ? ? ? ?您的瀏覽器不支持canvas，請升級瀏覽器，顯示此行文本。

</canvas>

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

·瀏覽器不兼容，可以使用flash等手段進行優雅降級

2.2 canvas繪圖上下文context

2.2.1 Context：Canvas的上下文、繪制環境。（重點掌握）

上下文：上知天文，下知地理。是所有的繪制操作api的入口或者集合。

Canvas自身無法繪制任何內容。Canvas的繪圖是使用JavaScript操作的。

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

var canvas ?= document.getElementById( 'cavsElem' ); //獲得畫布

var ctx = canvas.getContext( '2d' );//注意：2d小寫，3d：webgl

2.3基本的繪制路徑（重點）

2.3.1 canvas坐標系

canvas坐標系，從最左上角0,0開始。x向右增大，y向下增大

2.3.2設置繪制起點(moveTo)

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

*解釋：設置上下文繪制路徑的起點。相當于移動畫筆到某個位置

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

*注意：**繪制線段前必須先設置起點，不然繪制無效。**

2.3.3繪制直線(lineTo)

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

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

*參數：x,y線頭點坐標。

2.3.4路徑開始和閉合

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

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

*解釋：如果復雜路徑繪制，必須使用路徑開始和結束。閉合路徑會自動把最后的線頭和開始的線頭連在一起。

* beginPath:核心的作用是將 不同繪制的形狀進行隔離，

每次執行此方法，表示重新繪制一個路徑,跟之前的繪制的墨跡可以進行分開樣式設置和管理。

2.3.5描邊(stroke)

*語法：ctx.stroke();

*解釋：根據路徑繪制線。路徑只是草稿，真正繪制線必須執行stroke

* stroke:（用筆等）畫；輕撫；輕挪；敲擊；劃尾槳；劃掉；（打字時）擊打鍵盤

英[str??k]美[strok]

canvas繪制的基本步驟：

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

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

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

第四步：繪制線(矩形、圓形、圖片...) =>ctx.lineTo(x, y)

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

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

html部分：

你的瀏覽器不支持canvas，請升級瀏覽器

javascript部分：

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

//獲得畫布

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

var ctx = canvas.getContext('2d'); ?//獲得上下文

canvas.width = 900; ????//設置標簽的屬性寬高

canvas.height = 600; ???//千萬不要用canvas.style.height

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

//繪制三角形

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

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

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

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

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

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

·綜合案例：02繪制定位表格.html

·綜合案例：03畫畫板.html

2.3.7填充(fill)

*語法：ctx.fill();

*解釋：填充，是將閉合的路徑的內容填充具體的顏色。默認黑色。

*注意：交叉路徑的填充問題，“非零環繞原則”，順逆時針穿插次數決定是否填充。

以下是非0環繞原則的原理：（了解即可，非常少會用到復雜的路徑）

“非零環繞規則”是這么來判斷有自我交叉情況的路徑的：對于路徑中的任意給定區域，從該區域內部畫一條足夠長的線段，

使此線段的終點完全落在路徑范圍之外。

圖2-14中的那三個箭頭所描述的就是上面這個步驟。

接下來，將計數器初始化為0，

然后，每當這條線段與路徑上的直線或曲線相交時，

就改變計數器的值。如果是與路徑的順時針部分相交，則加1，

如果是與路徑的逆時針部分相交，則減1。若計數器的最終值不是0，那么此區域就在路徑里面，在調用fill()方法時，

瀏覽器就會對其進行填充。

如果最終值是0，那么此區域就不在路徑內部，瀏覽器也就不會對其進行填充了

*案例：04填充矩形.html

2.3.8快速創建矩形rect()方法

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

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

* rect方法只是規劃了矩形的路徑，并沒有填充和描邊。

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

*rect: abbr.矩形（rectangular）；收據（receipt）

2.3.9快速創建描邊矩形和填充矩形

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

-參數跟2.3.8相同，注意此方法繪制完路徑后立即進行stroke繪制

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

-參數跟2.3.8相同， 此方法執行完成后。立即對當前矩形進行fill填充。

2.3.10清除矩形(clearRect)

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

*解釋：清除某個矩形內的繪制的內容，相當于橡皮擦。

2.4繪制圓形（arc)

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

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

oarc:弧（度）弧形物；天穹 英[ɑ?k]美[ɑrk]

ocounter反擊，還擊；反向移動，對著干；反駁，回答['ka?nt?]美['ka?nt?]

o解釋：

§x,y：圓心坐標。

§r：半徑大小。

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

§eAngel:結束的角度，注意是弧度。π

§counterclockwise：是否是逆時針。true是逆時針，false：順時針

§弧度和角度的轉換公式：rad = deg*Math.PI/180;

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

·案例：05繪制圓形.html

·案例：06繪制餅狀圖.html

2.5繪制文字（會使用就可以了）

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

·font設置或返回文本內容的當前字體屬性

ofont屬性使用的語法與CSS font屬性相同。

例如：ctx.font = "18px '微軟雅黑'";

·textAlign設置或返回文本內容的當前對齊方式

ostart :默認。文本在指定的位置開始。

oend :文本在指定的位置結束。

ocenter:文本的中心被放置在指定的位置。

oleft :文本左對齊。

oright :文本右對齊。

*例如：ctx.textAlign = 'left';

·textBaseline設置或返回在繪制文本時使用的當前文本基線

oalphabetic： 默認。文本基線是普通的字母基線。

otop： 文本基線是em方框的頂端。。

ohanging： 文本基線是懸掛基線。

omiddle： 文本基線是em方框的正中。

oideographic： 文本基線是em基線。

obottom： 文本基線是em方框的底端。

例如：ctx.textBaseline = 'top';

單詞:

alphabetic:字母的；照字母次序的[,?lf?'b?t?k]

ideographic：表意的；表意字構成的 ??英[,?d???'ɡr?f?k]美[,?d??'gr?f?k]

2.5.2上下文繪制文字方法

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

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

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

*單詞：measure測量；估量；權衡 ??英['me??]美['m???]

//綜合案例代碼：

ctx.moveTo( 300, 300 );

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

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

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

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

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

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

2.5.3案例07文字繪制.html

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

2.6.1基本繪制圖片的方式

context.drawImage(img,x,y);

參數說明：x,y繪制圖片左上角的坐標，img是繪制圖片的dom對象。

2.6.2在畫布上繪制圖像，并規定圖像的寬度和高度

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

參數說明：width繪制圖片的寬度，height：繪制圖片的高度

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

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

設置高=原高度*設置寬/原寬度;

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

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

參數說明：

sx,sy裁剪的左上角坐標，

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

其他同上

2.6.4用JavaScript創建img對象

第一種方式：

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

第二種方式：

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

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

img.alt = "文本信息";

img.onload = function() {

//圖片加載完成后，執行此方法

}

·

·案例：08繪制圖片.html

·案例：09繪制圖片裁剪.html

·案例：10序列幀動畫.html

三、canvas進階

3.1 Canvas顏色樣式和陰影

3.1.1設置填充和描邊的顏色（掌握）

·fillStyle :設置或返回用于填充繪畫的顏色

·strokeStyle:設置或返回用于筆觸的顏色

以上兩個值都可以接受顏色名,16進制數據，rgb值，甚至rgba.一般先進行設置樣式然后進行繪制。

例如：

ctx.strokeStyle = "red";

ctx.strokeStyle = "#ccc";

ctx.strokeStyle = "rgb(255,0,0)";

ctx.strokeStyle = "rgba(255,0,0,6)";

3.1.2設置陰影（了解，少用，性能差）

·類比于CSS3的陰影。

·shadowColor： 設置或返回用于陰影的顏色

·shadowBlur： 設置或返回用于陰影的模糊級別,大于1的正整數，數值越高，模糊程度越大

·shadowOffsetX： 設置或返回陰影距形狀的水平距離

·shadowOffsetY： 設置或返回陰影距形狀的垂直距離

ctx.fillStyle = "rgba(255,0,0, .9)"

ctx.shadowColor = "teal";

ctx.shadowBlur = 10;

ctx.shadowOffsetX = 10;

ctx.shadowOffsetY = 10;

ctx.fillRect(100, 100, 100, 100);

例如：

·案例：12設置box盒子陰影.html

·設置png圖片的陰影，圖片透明部分不會被投影。

3.2復雜樣式（了解）

3.2.1創建線性漸變的樣式（了解）

·一般不用，都是用圖片代替，canvas繪制圖片效率更高。

·線性漸變可以用于矩形、圓形、文字等顏色樣式

·線性漸變是一個對象

·語法：ctx.createLinearGradient(x0,y0,x1,y1); //參數：x0,y0起始坐標，x1,y1結束坐標

例如：

//創建線性漸變的對象，

var grd=ctx.createLinearGradient(0,0,170,0);

grd.addColorStop(0,"black"); ?//添加一個漸變顏色，第一個參數介于0.0與1.0之間的值，表示漸變中開始與結束之間的位置。

grd.addColorStop(1,"white"); ?//添加一個漸變顏色

ctx.fillStyle =grd; ??????????//關鍵點，把漸變設置到 填充的樣式

案例13設置線性漸變.html

3.2.2設置圓形漸變（徑向漸變） 了解

·創建放射狀/圓形漸變對象。可以填充文本、形狀等

·context.createRadialGradient(x0,y0,r0,x1,y1,r1);

·radial半徑的；放射狀的；光線的；光線狀的 英['re?d??l]美['red??l]

·參數詳解：

ox0:漸變的開始圓的x坐標

oy0:漸變的開始圓的y坐標

or0:開始圓的半徑

ox1:漸變的結束圓的x坐標

oy1:漸變的結束圓的y坐標

or1:結束圓的半徑

var rlg = ctx.createRadialGradient(300,300,10,300,300,200);

rlg.addColorStop(0, 'teal'); ???//添加一個漸變顏色

rlg.addColorStop(.4, 'navy');

rlg.addColorStop(1, 'purple');

ctx.fillStyle = rlg;//設置 填充樣式為延續漸變的樣式

ctx.fillRect(100, 100, 500, 500);

·案例14圓形漸變.html

3.2.3繪制背景圖（了解）

·ctx.createPattern(img,repeat)方法在指定的方向內重復指定的元素了解

·pattern：n.模式；圖案；樣品 英['p?t(?)n]美['p?t?n]

·第一參數：設置平鋪背景的圖片，第二個背景平鋪的方式。

oimage： 規定要使用的圖片、畫布或視頻元素。

orepeat： 默認。該模式在水平和垂直方向重復。

orepeat-x： 該模式只在水平方向重復。

orepeat-y： 該模式只在垂直方向重復。

ono-repeat： 該模式只顯示一次（不重復）。

var ctx=c.getContext("2d");

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

var pat=ctx.createPattern(img,"repeat");

ctx.rect(0,0,150,100);

ctx.fillStyle=pat;//把背景圖設置給填充的樣式

ctx.fill();

·案例15背景圖填充.html

3.3變換（重點）

3.3.1縮放（重點）

·scale()方法縮放當前繪圖，更大或更小

·語法：context.scale(scalewidth,scaleheight)

oscalewidth :縮放當前繪圖的寬度(1=100%, 0.5=50%, 2=200%,依次類推)

oscaleheight :縮放當前繪圖的高度(1=100%, 0.5=50%, 2=200%, etc.) +注意：縮放的是整個畫布，縮放后，繼續繪制的圖形會被放大或縮小。

·案例16縮放案例.html

3.3.2位移畫布（重點）

·ctx.translate(x,y)方法重新映射畫布上的(0,0)位置

·參數說明：

·x： 添加到水平坐標（x）上的值

·y： 添加到垂直坐標（y）上的值

·發生位移后，相當于把畫布的0,0坐標 更換到新的x,y的位置，所有繪制的新元素都被影響。

·位移畫布一般配合縮放和旋轉等。

·案例：17位移畫布.html

3.3.3旋轉（重點）

·context.rotate(angle);方法旋轉當前的繪圖

·注意參數是弧度（PI）

·如需將角度轉換為弧度，請使用degrees*Math.PI/180公式進行計算。

·案例：18旋轉畫布.html

3.3繪制環境保存和還原（重要）

·ctx.save()保存當前環境的狀態

o可以把當前繪制環境進行保存到緩存中。

·ctx.restore()返回之前保存過的路徑狀態和屬性

o獲取最近緩存的ctx

·一般配合位移畫布使用。

·案例：19矩形旋轉案例.html

3.4設置繪制環境的透明度（了解）

·context.globalAlpha=number;

·number:透明值。必須介于0.0（完全透明） 與1.0（不透明） 之間。

·設置透明度是全局的透明度的樣式。注意是全局的。

3.5畫布限定區域繪制（了解）

·ctx.clip();方法從原始畫布中剪切任意形狀和尺寸

·一旦剪切了某個區域，則所有之后的繪圖都會被限制在被剪切的區域內（不能訪問畫布上的其他區域）

·一般配合繪制環境的保存和還原。

3.6畫布保存base64編碼內容（重要）

·把canvas繪制的內容輸出成base64內容。

·語法：canvas.toDataURL(type, encoderOptions);

·例如：canvas.toDataURL("image/jpg",1);

·參數說明：

otype，設置輸出的類型，比如image/png image/jpeg等

oencoderOptions：0-1之間的數字，用于標識輸出圖片的質量，1表示無損壓縮，類型為：image/jpeg或者image/webp才起作用。

案例1：

var canvas = document.getElementById("canvas");

var dataURL = canvas.toDataURL();

console.log(dataURL);

// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby

// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

var img = document.querySelector("#img-demo");//拿到圖片的dom對象

img.src = canvas.toDataURL("image/png"); ?????//將畫布的內容給圖片標簽顯示

3.7畫布渲染畫布（重要）

·context.drawImage(img,x,y);

·img參數也可以是畫布，也就是把一個畫布整體的渲染到另外一個畫布上。

var canvas1 = document.querySelector('#cavsElem1');

var canvas2 = document.querySelector('#cavsElem2');

var ctx1 = canvas1.getContext('2d');

var ctx2 = canvas2.getContext('2d');

ctx1.fillRect(20, 20, 40, 40); ?????//在第一個畫布上繪制矩形

ctx2.drawImage(canvas1, 10, 10); ???//將第一個畫布整體繪制到第二個畫布上

3.8了解：線條樣式（了解）

·lineCap設置或返回線條的結束端點(線頭、線冒)樣式

obutt： 默認。向線條的每個末端添加平直的邊緣。

§翻譯.：屁股；煙頭；笑柄；靶垛；粗大的一端 英[b?t]美[b?t]

oround： 向線條的每個末端添加圓形線帽。

osquare： 向線條的每個末端添加正方形線帽。

參考：23線的樣式.html

·lineJoin設置或返回兩條線相交時，所創建的拐角類型

obevel:創建斜角。

§翻譯.斜角；斜面；[測]斜角規 英['bev(?)l]美['b?vl]

oround:創建圓角。

omiter:默認。創建尖角

·lineWidth設置或返回當前的線條寬度

·miterLimit設置或返回最大斜接長度

o意思:斜接 英['ma?t?]

o斜接長度指的是在兩條線交匯處內角和外角之間的距離。

o一般用默認值：10就可以了。除非需要特別長的尖角時，使用此屬性。

3.9了解貝塞爾曲線（知道有）

3.9.1繪制一條二次方曲線。

·微軟的畫圖板中的曲線的顏色。

·quadratic：二次方的意思， 英[kw?'dr?t?k]美[kwɑ'dr?t?k]

·Curve：曲線的意思， 英[k??v]美[k?v]

·語法：context.quadraticCurveTo(cpx,cpy,x,y);

·參數：

ocpx： 貝塞爾控制點的x坐標

ocpy： 貝塞爾控制點的y坐標

ox： 結束點的x坐標

oy： 結束點的y坐標

ctx.beginPath();

ctx.moveTo(20,20);

//繪制2次方曲線，貝賽爾曲線

ctx.quadraticCurveTo(20,100,200,20);

ctx.stroke();

3.9.2繪制貝塞爾曲線（知道有）

·繪制一條三次貝塞爾曲線

·語法：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

·提示：三次貝塞爾曲線需要三個點。前兩個點是用于三次貝塞爾計算中的控制點，第三個點是曲線的結束點。曲線的開始點是當前路徑中最后一個點。如果路徑不存在，那么請使用beginPath()和moveTo()方法來定義開始點。

·參數說明：

ocp1x： 第一個貝塞爾控制點的x坐標

ocp1y： 第一個貝塞爾控制點的y坐標

ocp2x： 第二個貝塞爾控制點的x坐標

ocp2y： 第二個貝塞爾控制點的y坐標

ox:結束點的x坐標

oy:結束點的y坐標

//繪制復雜的貝塞爾曲線

ctx.beginPath();

ctx.moveTo(400,400);

//參數說明：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

// cp1x： 第一個貝塞爾控制點的x坐標

// cp1y： 第一個貝塞爾控制點的y坐標

// cp2x： 第二個貝塞爾控制點的x坐標

// cp2y： 第二個貝塞爾控制點的y坐標

// x:結束點的x坐標

// y:結束點的y坐標

ctx.bezierCurveTo(500, 200, 600, 600, 700, 300);

ctx.stroke();

·案例：25繪制貝塞爾曲線.html

3.10了解創建兩條切線的弧（知道有）

·在畫布上創建介于當前起點和兩個點形成的夾角的切線之間的弧

·語法：context.arcTo(x1,y1,x2,y2,r); //類比：css3中的圓角。

·例如：ctx.arcTo(240, 100, 240, 110, 40);

·參數：

ox1:弧的端點1的x坐標

oy1:弧的端點1的y坐標

ox2:弧的端點2(終點)的x坐標

oy2:弧的端點2(終點)的y坐標

or :弧的半徑

//代碼demo：

ctx.beginPath();

ctx.moveTo(100,100);

ctx.lineTo(200,100);

//context.arcTo(x1,y1,x2,y2,r); //類比：css3中的圓角。

ctx.arcTo(240, 100, 240, 110, 40);

ctx.lineTo(240, 300);

ctx.stroke();

3.11了解判斷點是否在路徑中（知道有）

context.isPointInPath(x,y);

//isPointInPath()方法返回true，如果指定的點位于當前路徑中；否則返回false。

//判斷x,y坐標的點是否在當前的路徑中。

3.12了解文本寬度計算（知道有）

context.measureText(text).width;

3.13如果以后做canvas游戲方向開發深入學習可以擴展內以下容：

·setTransform()將當前轉換重置為單位矩陣。然后運行transform()

·transform()替換繪圖的當前轉換矩陣

·globalCompositeOperation設置或返回新圖像如何繪制到已有的圖像上

·像素操作

四、Canvas開發庫封裝

4.1封裝常用的繪制函數

4.1.1封裝一個矩形

//思考：我們用到的矩形需要哪些繪制的東西呢？

1、矩形的x、y坐標

2、矩形的寬高

3、矩形的邊框的線條樣式、線條寬度

4、矩形填充的樣式

5、矩形的旋轉角度

6、矩形的縮小放大

//下面是把上面所有的功能進行封裝的代碼：

function ItcastRect( option ) {//矩形構造函數

this._init(option);

}

ItcastRect.prototype = { ?//矩形的原型對象

_init: function( option ) { ?//初始化方法

option = option || {};

this.x = option.x === 0 ? 0 : option.x || 100;

this.y = option.y === 0 ? 0 : option.y || 100;

this.w = option.w || 100;

this.h = option.h || 100;

this.angle = option.angle === 0 ? 0 : option.angle || 0;

this.fillStyle = option.fillStyle || 'silver';

this.strokeStyle = option.strokeStyle || 'red';

this.strokeWidth = option.strokeWidth || 4;

this.scaleX = option.scaleX || 1;

this.scaleY = option.Y || 1;

},

render: function( ctx ) {//把矩形渲染到canvas中

ctx.save();

ctx.translate( this.x, this.y );//位移畫布

ctx.rotate( this.angle * Math.PI / 180 );//旋轉角度

ctx.scale( this.scaleX, this.scaleY );//縮放

ctx.fillStyle = this.fillStyle;

ctx.fillRect( 0, 0, this.w, this.h ); //填充矩形

ctx.lineWidth = this.strokeWidth; ????//線寬

ctx.strokeStyle = this.strokeStyle; ??//填充樣式

ctx.strokeRect( 0,0,this.w,this.h ); ?//描邊樣式

ctx.restore();

},

constructor: ItcastRect

};

4.1.2作業：嘗試著封裝一個圓形？

//封裝圓形的代碼的答案：不要偷看

function ItcastCircle( option ) {

this._init( option );

}

ItcastCircle.prototype = {

_init: function( option ) {

option = option || {};

this.x = option.x === 0 ? 0 : option.x || 100;

this.y = option.y === 0 ? 0 : option.y || 100;

this.w = option.w || 100;

this.h = option.h || 100;

this.angle = option.angle === 0 ? 0 : option.angle || 0;

this.fillStyle = option.fillStyle || 'silver';

this.strokeStyle = option.strokeStyle || 'red';

this.strokeWidth = option.strokeWidth || 4;

this.scaleX = option.scaleX || 1;

this.scaleY = option.Y || 1;

this.opactity = option.opactity || 1;

this.counterclockwise =

option.counterclockwise === true ? true : option.counterclockwise || false;

this.startAngle = option.startAngle == 0 ? 0 : option.startAngle || 0;

this.endAngle = option.endAngle == 0 ? 0 : option.endAngle || 0;

this.startAngle = this.startAngle * Math.PI/180;

this.endAngle = this.endAngle * Math.PI / 180;

this.r = option.r || 100;

},

render: function( ctx ) {

ctx.save();

ctx.translate( this.x, this.y);

ctx.scale( this.scaleX, this.scaleY );

ctx.rotate( this.agnle * Math.PI / 180 );

ctx.globalAlpha = this.opacity;

ctx.fillStyle = this.fillStyle;

ctx.strokeStyle = this.strokeStyle;

ctx.moveTo(0, 0);

ctx.arc( 0, 0, this.r, this.startAngle, this.endAngle, this.counterclockwise);

ctx.fill();

ctx.stroke();

ctx.restore();

},

constructor: ItcastCircle

};

4.2第三方庫使用

·Rgraph vs百度的echart

https://roopons.com.au/wp-content/plugins/viral-optins/js/rgraph/

·國產的egret引擎

http://www.egret-labs.org/

·比較火的3d引擎：treejs

http://threejs.org/

·Konva

官網：http://konvajs.github.io/

特點：

*小巧、使用方便、適合移動端和pc端

*支持豐富的事件處理操作

*支持類似JQuery的操作方式（順帶能復習jQueyr）

*開源，可以隨意更改

*社區更新比較活躍，github托管源碼

*性能也不錯

·其他的還有很多，希望以后能用到你們的庫。

五、Konva的使用快速上手

5.1 Konva的整體理念

·舞臺的概念的引入。整個視圖看做是一個舞臺stage

·舞臺中可以繪制很多個層layer

·layer下面可以有很多的group

·group下面可以有 矩形、圖片、其他形狀等

·參看：快速上手文檔---查看翻譯文檔

Stage

|

+------+------+

| ????????????|

Layer ????????Layer

| ????????????|

+-----+-----+ ????Shape

| ??????????|

Group ??????Group

| ??????????|

+ ??????+---+---+

| ??????| ??????|

Shape ??Group ???Shape

|

+

|

Shape

5.2 Konva矩形案例

5.2.1創建一個矩形：Konva.Rect(option);

//Konva使用的基本案例

//第一步：創建舞臺

var stage = new Konva.Stage({

container: 'container', ????//需要存放舞臺的Dom容器

width: window.innerWidth, ??//設置全屏

height: window.innerHeight

});

//第二步：創建層

var layer = new Konva.Layer(); ?//創建一個層

stage.add(layer); ??????????????//把層添加到舞臺

//第三步： 創建矩形

var rect = new Konva.Rect({ ????//創建一個矩形

x: 100, ????????????????????//矩形的x坐標，相對其父容器的坐標

y: 100,

width: 100, ????????????????//矩形的寬度

height: 100, ???????????????//矩形高度

fill: 'gold', ??????????????//矩形填充的顏色

stroke: 'navy', ????????????//矩形描邊的顏色

strokeWidth: 4, ????????????//填充寬度

opactity: .2, ??????????????//矩形的透明度

scale: 1.2, ????????????????//矩形的縮放1：原來大小

rotation: 30, ??????????????//旋轉的角度，是deg不是弧度。

cornerRadius: 10, ??????????//圓角的大小（像素）

id: 'rect1', ???????????????//id屬性，類似dom的id屬性

name: 'rect',

draggable: true ????????????//是否可以進行拖拽

});

//創建一個組

var group = new Konva.Group({

x: 40,

y: 40,

});

group.add( rect ); ?//把矩形添加到組中

//第四步： 把形狀放到層中

layer.add( group ); //把組添加到層中

layer.draw(); ??????//繪制層到舞臺上

5.3 Konva的動畫系統

5.3.1 tween對象(重點)

·tween，英文意思：兩者之間， 英[twi?n]美[twin]

·tween是控制Konva對象進行動畫的核心對象。

·tween可以控制所有數字類型的屬性進行動畫處理，比如：x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX等

//案例：

var tween = new Konva.Tween({

node: rect, ????????????//要進行動畫的Konva對象

x: 300, ????????????????//要進行動畫的屬性

opacity: .8,

duration: 1, ???????????//持續時間

easing: Konva.Easings.EaseIn, //動畫的動畫效果

yoyo: true, ????????????//是否進行循環播放的設置

onFinish: function() {

//動畫執行結束后，執行此方法

}

});

tween.play(); ??//啟動動畫

·tween的控制方法

otween.play(), //播放動畫

otween.pause(), //暫停動畫

otween.reverse(), //動畫逆播放

otween.reset(), //重置動畫

otween.finish(), //立即結束動畫

oseek：英文：尋找 英[si?k]美[sik]

·tween的緩動控制選項

oKonva.Easings.Linear //線性

oKonva.Easings.EaseIn //緩動，先慢后快

oKonva.Easings.EaseOut //先快后慢

oKonva.Easings.EaseInOut //兩頭慢，中間快

oKonva.Easings.BackEaseIn //往回來一點，然后往前沖，汽車啟動類似...

oKonva.Easings.BackEaseOut

oKonva.Easings.BackEaseInOut

oKonva.Easings.ElasticEaseIn //橡皮筋 英[?'l?st?k]美[?'l?st?k]

oKonva.Easings.ElasticEaseOut

oKonva.Easings.ElasticEaseInOut

oKonva.Easings.BounceEaseIn //彈跳；彈起，反跳；彈回 英[ba?ns]美[ba?ns]

oKonva.Easings.BounceEaseOut

oKonva.Easings.BounceEaseInOut

oKonva.Easings.StrongEaseIn //強力

oKonva.Easings.StrongEaseOut

oKonva.Easings.StrongEaseInOut

·動畫效果參考：29Konva動畫緩動效果案例.html

5.3.2動畫to的使用

·to就是對tween的封裝，比較簡單好用。

//案例：

var rect = new Konva.Rect({

x: 10,

y: 10,

width: 100,

height: 100,

fill: 'red'

});

layer.add(rect);

layer.draw();

//動畫系統

rect.to({

x: 100,

y: 100,

opactity: .1,

duration: 3,

onFinish: function() {

}

});

//to:就是對tween的簡單應用。

5.3.3 Animate的應用

·Animation動畫，實際上就是瀏覽器通知開發者進行繪制，并提供當前的時間

var anim = new Konva.Animation(function(frame) {

//動畫系統提供的frame有三個屬性可以使用：

var time = frame.time, //動畫執行的總時間

timeDiff = frame.timeDiff, //距離上一幀的時間

frameRate = frame.frameRate; //幀率（既1000/間隔時間）

//動畫的動作

}, layer);

anim.start();//啟動動畫

//anim.stop();//結束動畫

5.3.4循環播放動畫的實現

//總體思路，使用tween配合onFinish事件中重新播放動畫，達到循環播放的效果

var loopTween = new Konva.Tween({

node: star, //設置要表現動畫的Konva對象

rotation: 360, ?//旋轉360度

duration: 2, ???//動畫持續時間

easing: Konva.Easings.Linear,

onFinish: function() {

// this === loopTween //true

this.reset();//重置動畫

this.play(); //重新播放動畫

}

});

loopTween.play();

5.3.5回放且循環播放動畫

·yoyo屬性可以進行對動畫進行播放完后，回放當前動畫，并持續循環來回切換播放。

rect.to({

duration: 2,

scale: 1.5,

yoyo: true//此設置也可以用于tween

});

5.3.6進度條案例

·三角函數的補充

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

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

·圓形上面的點的坐標的計算公式

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

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

·group的靈活運用

okonva的group很靈活，每個group都有自己的坐標系

ogroup可以包含其他的group，可以對group做整個組的動畫

ogroup可以通過getChidren();//可以拿到直接子級元素。

var group = new Konva.Group({

x: 0,

y: 0

});

group.add(rect);

5.4 Konva的事件（重要）

var rect = new Konva.Rect({

x: 100,

y: 100,

fill: 'red',

width: 200,

height: 200

});

//綁定事件Konva支持事件：mouseover, mouseout, mouseenter, mouseleave, mousemove, mousedown, mouseup, mousewheel, click, dblclick, dragstart, dragmove, and dragend

rect.on('click', function(){ ??//jQuery一模一樣！！

console.log('^_^ ?^_^');

});

//綁定多個事件

rect.on('click mousemove',function(e){

});

//解除綁定事件

rect.off('click'); ????????????//這不是jQuery嗎？

//觸發事件

rect.fire('click');

//取消事件冒泡

rect.on('click', function(evt) {

alert('You clicked the circle!');

evt.cancelBubble = true; ?????//取消事件冒泡

});

5.5 Konva的選擇器

·選擇方法。

oID選擇法：stage.find('#id'); //此方法返回的是一個數組

oname選擇法：group.findOne('.name');//返回一個Konva對象

otype選擇法：group.find('Circle');//查找所有的圓形Konva對象

//組中查找圓形的Konva對象

groupCircle.find('Circle').each(function( circle, index ){

circle.setZIndex( 3 - index );

});

5.6餅狀圖案例

·wedge:楔形

5.7柱狀圖案例

·histogram n. [統計]直方圖；柱狀圖 英['h?st?gr?m]美['h?st?ɡr?m]

六、Canvas項目實戰

七、Canvas優化

window.requestAnimFrame = (function(){

return ?window.requestAnimationFrame ??????||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ???||

window.oRequestAnimationFrame ?????||

window.msRequestAnimationFrame ????||

function(/* function */ callback, /* DOMElement */ element){

window.setTimeout(callback, 1000 / 60);

};

})();

// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/

var canvas, context, toggle;

init();

animate();

function init() {

canvas = document.createElement( 'canvas' );

canvas.width = 512;

canvas.height = 512;

context = canvas.getContext( '2d' );

document.body.appendChild( canvas );

}

function animate() {

requestAnimFrame( animate );

draw();

}

function draw() {

var time = new Date().getTime() * 0.002;

var x = Math.sin( time ) * 192 + 256;

var y = Math.cos( time * 0.9 ) * 192 + 256;

toggle = !toggle;

context.fillStyle = toggle ? 'rgb(200,200,20)' : ?'rgb(20,20,200)';

context.beginPath();

context.arc( x, y, 10, 0, Math.PI * 2, true );

context.closePath();

context.fill();

}