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足夠完成全部的應用

2、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
3、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設置或返回新圖像如何繪製到已有的圖像上
·像素操做
4、Canvas開發庫封裝
4.1封裝經常使用的繪製函數
4.1.1封裝一個矩形
//思考：咱們用到的矩形須要哪些繪製的東西呢？
一、矩形的x、y座標
二、矩形的寬高
三、矩形的邊框的線條樣式、線條寬度
四、矩形填充的樣式
五、矩形的旋轉角度
六、矩形的縮小放大
//下面是把上面全部的功能進行封裝的代碼：
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託管源碼
*性能也不錯
·其餘的還有不少，但願之後能用到大家的庫。
5、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]
6、Canvas項目實戰
7、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();
}