一：canvas簡介

1.1什么是canvas谬俄？

①：canvas是HTML5提供的一種新標(biāo)簽<canvas></canvas>

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

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

Canvas是一個矩形區(qū)域的畫布绍傲，可以用JavaScript在上面繪畫∷９玻控制其每一個像素烫饼。---其默認在頁面上得的大小是width:300px; ?height:100px;

canvas標(biāo)簽使用JavaScript在網(wǎng)頁上繪制圖像，本身不具備繪圖功能试读。

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

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

1.2 canvas主要應(yīng)用的領(lǐng)域

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

2.可視化數(shù)據(jù).數(shù)據(jù)圖表話烛缔，

3.banner廣告：Flash曾經(jīng)輝煌的時代馏段，智能手機還未曾出現(xiàn)≡玻現(xiàn)在以及未來的智能機時代，HTML5技術(shù)能夠在banner廣告上發(fā)揮巨大作用毅弧，用Canvas實現(xiàn)動態(tài)的廣告效果再合適不過气嫁。

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

5.未來=>遠程計算機控制：Canvas可以讓開發(fā)者更好地實現(xiàn)基于Web的數(shù)據(jù)傳輸寸宵，構(gòu)建一個完美的可視化控制界面。

6.未來=>圖形編輯器：Photoshop圖形編輯器將能夠100%基于Web實現(xiàn)元咙。

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

8.完整的canvas移動化應(yīng)用

9.canvas的標(biāo)準(zhǔn)：

? 最新標(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/

? 目前來說感猛，標(biāo)準(zhǔn)還在完善中。先用早期的api足夠完成所有的應(yīng)用

二奢赂、canvas繪圖基礎(chǔ)

2.0 sublime配置canvas插件

推薦：

安裝插件：AndyJS2

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

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

2.1 Canvas標(biāo)簽

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

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

標(biāo)簽名canvas陪白，需要進行閉合。就是一普通的html標(biāo)簽膳灶。

可以設(shè)置width和height屬性咱士，但是屬性值單位必須是px，否則忽略轧钓。

width和hegiht：默認300*150像素

注意：

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

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

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

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

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

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

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

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

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

例如：

<canvas ? id="myCanvas">

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

</canvas>

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

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

2.2 canvas繪圖上下文context

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

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

Canvas自身無法繪制任何內(nèi)容。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坐標(biāo)系

canvas坐標(biāo)系懊亡，從最左上角0,0開始。x向右增大乎串，y向下增大

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:核心的作用是將 不同繪制的形狀進行隔離，

每次執(zhí)行此方法缀棍，表示重新繪制一個路徑,跟之前的繪制的墨跡可以進行分開樣式設(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部分：

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

javascript部分：

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

//獲得畫布

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

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

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

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(); ???????//結(jié)束路徑

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

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

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

2.3.7填充(fill)

*語法：ctx.fill();

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

*注意：交叉路徑的填充問題缴饭，“非零環(huán)繞原則”，順逆時針穿插次數(shù)決定是否填充骆莹。

以下是非0環(huán)繞原則的原理：（了解即可颗搂，非常少會用到復(fù)雜的路徑）

“非零環(huán)繞規(guī)則”是這么來判斷有自我交叉情況的路徑的：對于路徑中的任意給定區(qū)域，從該區(qū)域內(nèi)部畫一條足夠長的線段幕垦，

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

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

接下來智嚷，將計數(shù)器初始化為0卖丸，

然后，每當(dāng)這條線段與路徑上的直線或曲線相交時盏道，

就改變計數(shù)器的值稍浆。如果是與路徑的順時針部分相交，則加1猜嘱，

如果是與路徑的逆時針部分相交衅枫，則減1。若計數(shù)器的最終值不是0朗伶，那么此區(qū)域就在路徑里面弦撩，在調(diào)用fill()方法時，

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

如果最終值是0益楼，那么此區(qū)域就不在路徑內(nèi)部，瀏覽器也就不會對其進行填充了

*案例：04填充矩形.html

2.3.8快速創(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.9快速創(chuàng)建描邊矩形和填充矩形

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

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

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

-參數(shù)跟2.3.8相同， 此方法執(zhí)行完成后屠橄。立即對當(dāng)前矩形進行fill填充族跛。

2.3.10清除矩形(clearRect)

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

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

2.4繪制圓形（arc)

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

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

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

ocounter反擊姐仅，還擊；反向移動，對著干掏膏；反駁劳翰，回答['ka?nt?]美['ka?nt?]

o解釋：

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

§r：半徑大小馒疹。

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

§eAngel:結(jié)束的角度生均，注意是弧度。π

§counterclockwise：是否是逆時針腥刹。true是逆時針马胧，false：順時針

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

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

·案例：05繪制圓形.html

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

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

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

·font設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性

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

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

·textAlign設(shè)置或返回文本內(nèi)容的當(dāng)前對齊方式

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

oend :文本在指定的位置結(jié)束垫卤。

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

oleft :文本左對齊。

oright :文本右對齊穴肘。

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

·textBaseline設(shè)置或返回在繪制文本時使用的當(dāng)前文本基線

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

otop： 文本基線是em方框的頂端评抚。豹缀。

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

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

oideographic： 文本基線是em基線耿眉。

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

例如：ctx.textBaseline = 'top';

單詞:

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

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

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.5.3案例07文字繪制.html

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í)行此方法

}

·

·案例：08繪制圖片.html

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

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

三、canvas進階

3.1 Canvas顏色樣式和陰影

3.1.1設(shè)置填充和描邊的顏色（掌握）

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

·strokeStyle:設(shè)置或返回用于筆觸的顏色

以上兩個值都可以接受顏色名,16進制數(shù)據(jù)稻艰，rgb值懂牧，甚至rgba.一般先進行設(shè)置樣式然后進行繪制。

例如：

ctx.strokeStyle = "red";

ctx.strokeStyle = "#ccc";

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

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

3.1.2設(shè)置陰影（了解尊勿，少用僧凤，性能差）

·類比于CSS3的陰影。

·shadowColor： 設(shè)置或返回用于陰影的顏色

·shadowBlur： 設(shè)置或返回用于陰影的模糊級別,大于1的正整數(shù)元扔，數(shù)值越高躯保，模糊程度越大

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

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

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設(shè)置box盒子陰影.html

·設(shè)置png圖片的陰影，圖片透明部分不會被投影澎语。

3.2復(fù)雜樣式（了解）

3.2.1創(chuàng)建線性漸變的樣式（了解）

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

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

·線性漸變是一個對象

·語法：ctx.createLinearGradient(x0,y0,x1,y1); //參數(shù)：x0,y0起始坐標(biāo)祟滴，x1,y1結(jié)束坐標(biāo)

例如：

//創(chuàng)建線性漸變的對象振惰，

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

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

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

ctx.fillStyle =grd; ??????????//關(guān)鍵點，把漸變設(shè)置到 填充的樣式

案例13設(shè)置線性漸變.html

3.2.2設(shè)置圓形漸變（徑向漸變） 了解

·創(chuàng)建放射狀/圓形漸變對象草慧⊥盎祝可以填充文本、形狀等

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

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

·參數(shù)詳解：

ox0:漸變的開始圓的x坐標(biāo)

oy0:漸變的開始圓的y坐標(biāo)

or0:開始圓的半徑

ox1:漸變的結(jié)束圓的x坐標(biāo)

oy1:漸變的結(jié)束圓的y坐標(biāo)

or1:結(jié)束圓的半徑

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;//設(shè)置 填充樣式為延續(xù)漸變的樣式

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

·案例14圓形漸變.html

3.2.3繪制背景圖（了解）

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

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

·第一參數(shù)：設(shè)置平鋪背景的圖片，第二個背景平鋪的方式惕稻。

oimage： 規(guī)定要使用的圖片竖共、畫布或視頻元素。

orepeat： 默認俺祠。該模式在水平和垂直方向重復(fù)公给。

orepeat-x： 該模式只在水平方向重復(fù)借帘。

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

ono-repeat： 該模式只顯示一次（不重復(fù)）淌铐。

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;//把背景圖設(shè)置給填充的樣式

ctx.fill();

·案例15背景圖填充.html

3.3變換（重點）

3.3.1縮放（重點）

·scale()方法縮放當(dāng)前繪圖肺然，更大或更小

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

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

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

·案例16縮放案例.html

3.3.2位移畫布（重點）

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

·參數(shù)說明：

·x： 添加到水平坐標(biāo)（x）上的值

·y： 添加到垂直坐標(biāo)（y）上的值

·發(fā)生位移后，相當(dāng)于把畫布的0,0坐標(biāo) 更換到新的x,y的位置释涛，所有繪制的新元素都被影響加叁。

·位移畫布一般配合縮放和旋轉(zhuǎn)等。

·案例：17位移畫布.html

3.3.3旋轉(zhuǎn)（重點）

·context.rotate(angle);方法旋轉(zhuǎn)當(dāng)前的繪圖

·注意參數(shù)是弧度（PI）

·如需將角度轉(zhuǎn)換為弧度唇撬，請使用degrees*Math.PI/180公式進行計算它匕。

·案例：18旋轉(zhuǎn)畫布.html

3.3繪制環(huán)境保存和還原（重要）

·ctx.save()保存當(dāng)前環(huán)境的狀態(tài)

o可以把當(dāng)前繪制環(huán)境進行保存到緩存中。

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

o獲取最近緩存的ctx

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

·案例：19矩形旋轉(zhuǎn)案例.html

3.4設(shè)置繪制環(huán)境的透明度（了解）

·context.globalAlpha=number;

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

·設(shè)置透明度是全局的透明度的樣式扑浸。注意是全局的烧给。

3.5畫布限定區(qū)域繪制（了解）

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

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

·一般配合繪制環(huán)境的保存和還原喝噪。

3.6畫布保存base64編碼內(nèi)容（重要）

·把canvas繪制的內(nèi)容輸出成base64內(nèi)容础嫡。

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

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

·參數(shù)說明：

otype，設(shè)置輸出的類型酝惧，比如image/png image/jpeg等

oencoderOptions：0-1之間的數(shù)字榴鼎，用于標(biāo)識輸出圖片的質(zhì)量，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"); ?????//將畫布的內(nèi)容給圖片標(biāo)簽顯示

3.7畫布渲染畫布（重要）

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

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

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設(shè)置或返回線條的結(jié)束端點(線頭平项、線冒)樣式

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

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

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

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

參考：23線的樣式.html

·lineJoin設(shè)置或返回兩條線相交時，所創(chuàng)建的拐角類型

obevel:創(chuàng)建斜角余指。

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

oround:創(chuàng)建圓角窗宦。

omiter:默認。創(chuàng)建尖角

·lineWidth設(shè)置或返回當(dāng)前的線條寬度

·miterLimit設(shè)置或返回最大斜接長度

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

o斜接長度指的是在兩條線交匯處內(nèi)角和外角之間的距離咏闪。

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);

·參數(shù)：

ocpx： 貝塞爾控制點的x坐標(biāo)

ocpy： 貝塞爾控制點的y坐標(biāo)

ox： 結(jié)束點的x坐標(biāo)

oy： 結(jié)束點的y坐標(biāo)

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);

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

·參數(shù)說明：

ocp1x： 第一個貝塞爾控制點的x坐標(biāo)

ocp1y： 第一個貝塞爾控制點的y坐標(biāo)

ocp2x： 第二個貝塞爾控制點的x坐標(biāo)

ocp2y： 第二個貝塞爾控制點的y坐標(biāo)

ox:結(jié)束點的x坐標(biāo)

oy:結(jié)束點的y坐標(biāo)

//繪制復(fù)雜的貝塞爾曲線

ctx.beginPath();

ctx.moveTo(400,400);

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

// cp1x： 第一個貝塞爾控制點的x坐標(biāo)

// cp1y： 第一個貝塞爾控制點的y坐標(biāo)

// cp2x： 第二個貝塞爾控制點的x坐標(biāo)

// cp2y： 第二個貝塞爾控制點的y坐標(biāo)

// x:結(jié)束點的x坐標(biāo)

// y:結(jié)束點的y坐標(biāo)

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

ctx.stroke();

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

3.10了解創(chuàng)建兩條切線的还〔摹（知道有）

·在畫布上創(chuàng)建介于當(dāng)前起點和兩個點形成的夾角的切線之間的弧

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

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

·參數(shù)：

ox1:弧的端點1的x坐標(biāo)

oy1:弧的端點1的y坐標(biāo)

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

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

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楞遏，如果指定的點位于當(dāng)前路徑中茬暇；否則返回false。

//判斷x,y坐標(biāo)的點是否在當(dāng)前的路徑中寡喝。

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

context.measureText(text).width;

3.13如果以后做canvas游戲方向開發(fā)深入學(xué)習(xí)可以擴展內(nèi)以下容：

·setTransform()將當(dāng)前轉(zhuǎn)換重置為單位矩陣糙俗。然后運行transform()

·transform()替換繪圖的當(dāng)前轉(zhuǎn)換矩陣

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

·像素操作

四、Canvas開發(fā)庫封裝

4.1封裝常用的繪制函數(shù)

4.1.1封裝一個矩形

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

1巧骚、矩形的x、y坐標(biāo)

2格二、矩形的寬高

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

4顶猜、矩形填充的樣式

5沧奴、矩形的旋轉(zhuǎn)角度

6、矩形的縮小放大

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

function ItcastRect( option ) {//矩形構(gòu)造函數(shù)

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 );//旋轉(zhuǎn)角度

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作業(yè)：嘗試著封裝一個圓形长窄？

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

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/

·國產(chǎn)的egret引擎

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

·比較火的3d引擎：treejs

http://threejs.org/

·Konva

官網(wǎng)：http://konvajs.github.io/

特點：

*小巧滔吠、使用方便纲菌、適合移動端和pc端

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

*支持類似JQuery的操作方式（順帶能復(fù)習(xí)jQueyr）

*開源，可以隨意更改

*社區(qū)更新比較活躍疮绷，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創(chuàng)建一個矩形：Konva.Rect(option);

//Konva使用的基本案例

//第一步：創(chuàng)建舞臺

var stage = new Konva.Stage({

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

width: window.innerWidth, ??//設(shè)置全屏

height: window.innerHeight

});

//第二步：創(chuàng)建層

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

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

//第三步： 創(chuàng)建矩形

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

x: 100, ????????????????????//矩形的x坐標(biāo)庇麦，相對其父容器的坐標(biāo)

y: 100,

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

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

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

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

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

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

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

rotation: 30, ??????????????//旋轉(zhuǎn)的角度，是deg不是弧度属愤。

cornerRadius: 10, ??????????//圓角的大信鳌（像素）

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

name: 'rect',

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

});

//創(chuàng)建一個組

var group = new Konva.Group({

x: 40,

y: 40,

});

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

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

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

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

5.3 Konva的動畫系統(tǒng)

5.3.1 tween對象(重點)

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

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

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

//案例：

var tween = new Konva.Tween({

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

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

opacity: .8,

duration: 1, ???????????//持續(xù)時間

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

yoyo: true, ????????????//是否進行循環(huán)播放的設(shè)置

onFinish: function() {

//動畫執(zhí)行結(jié)束后丧诺，執(zhí)行此方法

}

});

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

·tween的控制方法

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

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

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

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

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

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();

//動畫系統(tǒng)

rect.to({

x: 100,

y: 100,

opactity: .1,

duration: 3,

onFinish: function() {

}

});

//to:就是對tween的簡單應(yīng)用。

5.3.3 Animate的應(yīng)用

·Animation動畫沮脖，實際上就是瀏覽器通知開發(fā)者進行繪制金矛，并提供當(dāng)前的時間

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

//動畫系統(tǒng)提供的frame有三個屬性可以使用：

var time = frame.time, //動畫執(zhí)行的總時間

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

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

//動畫的動作

}, layer);

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

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

5.3.4循環(huán)播放動畫的實現(xiàn)

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

var loopTween = new Konva.Tween({

node: star, //設(shè)置要表現(xiàn)動畫的Konva對象

rotation: 360, ?//旋轉(zhuǎn)360度

duration: 2, ???//動畫持續(xù)時間

easing: Konva.Easings.Linear,

onFinish: function() {

// this === loopTween //true

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

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

}

});

loopTween.play();

5.3.5回放且循環(huán)播放動畫

·yoyo屬性可以進行對動畫進行播放完后驶俊，回放當(dāng)前動畫，并持續(xù)循環(huán)來回切換播放免姿。

rect.to({

duration: 2,

scale: 1.5,

yoyo: true//此設(shè)置也可以用于tween

});

5.3.6進度條案例

·三角函數(shù)的補充

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

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

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

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

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

·group的靈活運用

okonva的group很靈活饼酿，每個group都有自己的坐標(biāo)系

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嗎澜掩？

//觸發(fā)事件

rect.fire('click');

//取消事件冒泡

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

alert('You clicked the circle!');

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

});

5.5 Konva的選擇器

·選擇方法购披。

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

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. [統(tǒng)計]直方圖；柱狀圖 英['h?st?gr?m]美['h?st?ɡr?m]

六肩榕、Canvas項目實戰(zhàn)

七刚陡、Canvas優(yōu)化

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();

}