《2.6.5 面向?qū)ο蠡A(chǔ)復(fù)習(xí)補(bǔ)充：》
創(chuàng)建對(duì)象的方式：
* var o = { name: '123', age: 18 }; //json方式創(chuàng)建
* var o = new Object(); ?//通過(guò)new的方式創(chuàng)建
* var o = new Persion(); //通過(guò)類(lèi)的構(gòu)造函數(shù)創(chuàng)建
JS中對(duì)象的屬性創(chuàng)建方式
* json的方式：var o = { age: 19 };
*直接添加屬性：var o = {}; ?o.age = 19;//太分散了，不利于管理
*由于js動(dòng)態(tài)語(yǔ)言的特性，如果屬性不存在的時(shí)候，直接添加屬性。
*構(gòu)造函數(shù)添加屬性
*原型添加公共的屬性
JS的構(gòu)造函數(shù)的原型 構(gòu)造函數(shù)的原型就是：構(gòu)造對(duì)象的模板，構(gòu)造函數(shù)原型里面的所有的屬性和方法都會(huì)共享給所有的 構(gòu)造函數(shù)構(gòu)造出來(lái)的所有實(shí)例。
【canvas進(jìn)階】
《3.1 Canvas顏色樣式和陰影》
《3.1.1 設(shè)置填充和描邊的顏色》（掌握）
fillStyle :設(shè)置或返回用于填充繪畫(huà)的顏色
strokeStyle:設(shè)置或返回用于筆觸的顏色
以上兩個(gè)值都可以接受顏色名,16進(jìn)制數(shù)據(jù)，rgb值，甚至rgba.一般先進(jìn)行設(shè)置樣式然后進(jìn)行繪制。
例如：
ctx.strokeStyle = "red";
ctx.strokeStyle = "#ccc";
ctx.strokeStyle = "rgb(255,0,0)";
ctx.strokeStyle = "rgba(255,0,0,6)";
《3.1.2 設(shè)置陰影》（了解，少用，性能差）
類(lèi)比于CSS3的陰影。
shadowColor： 設(shè)置或返回用于陰影的顏色
shadowBlur： 設(shè)置或返回用于陰影的模糊級(jí)別,大于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);
設(shè)置png圖片的陰影，圖片透明部分不會(huì)被投影。
《3.2 復(fù)雜樣式》（了解）
《3.2.1 創(chuàng)建線(xiàn)性漸變的樣式》（了解）
l一般不用，都是用圖片代替，canvas繪制圖片效率更高。
l線(xiàn)性漸變可以用于矩形、圓形、文字等顏色樣式
l線(xiàn)性漸變是一個(gè)對(duì)象
語(yǔ)法：ctx.createLinearGradient(x0,y0,x1,y1); //參數(shù)：x0,y0起始坐標(biāo)，x1,y1結(jié)束坐標(biāo)
例如：
//創(chuàng)建線(xiàn)性漸變的對(duì)象，
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black"); ?//添加一個(gè)漸變顏色，第一個(gè)參數(shù)介于0.0與1.0之間的值，表示漸變中開(kāi)始與結(jié)束之間的位置。
grd.addColorStop(1,"white"); ?//添加一個(gè)漸變顏色
ctx.fillStyle =grd; ? ? ? ? ? //關(guān)鍵點(diǎn)，把漸變?cè)O(shè)置到 填充的樣式
《3.2.2 設(shè)置圓形漸變（徑向漸變）》了解
創(chuàng)建放射狀/圓形漸變對(duì)象?？梢蕴畛湮谋?、形狀等
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
radial半徑的；放射狀的；光線(xiàn)的；光線(xiàn)狀的 英['re?d??l]美['red??l]
參數(shù)詳解：
x0:漸變的開(kāi)始圓的x坐標(biāo)
y0:漸變的開(kāi)始圓的y坐標(biāo)
r0:開(kāi)始圓的半徑
x1:漸變的結(jié)束圓的x坐標(biāo)
y1:漸變的結(jié)束圓的y坐標(biāo)
r1:結(jié)束圓的半徑
var rlg = ctx.createRadialGradient(300,300,10,300,300,200);
rlg.addColorStop(0, 'teal'); ? ?//添加一個(gè)漸變顏色
rlg.addColorStop(.4, 'navy');
rlg.addColorStop(1, 'purple');
ctx.fillStyle = rlg;//設(shè)置 填充樣式為延續(xù)漸變的樣式
ctx.fillRect(100, 100, 500, 500);
《3.2.3 繪制背景圖》（了解）
ctx.createPattern(img,repeat)方法在指定的方向內(nèi)重復(fù)指定的元素了解
pattern：n.模式；圖案；樣品 英['p?t(?)n]美['p?t?n]
第一參數(shù)：設(shè)置平鋪背景的圖片，第二個(gè)背景平鋪的方式。
image： 規(guī)定要使用的圖片、畫(huà)布或視頻元素。
repeat： 默認(rèn)。該模式在水平和垂直方向重復(fù)。
repeat-x： 該模式只在水平方向重復(fù)。
repeat-y： 該模式只在垂直方向重復(fù)。
no-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();
《3.3 變換》※（重點(diǎn)）
《3.3.1 縮放》（重點(diǎn)）
scale()方法縮放當(dāng)前繪圖，更大或更小
語(yǔ)法：context.scale(scalewidth,scaleheight)
scalewidth :縮放當(dāng)前繪圖的寬度(1=100%, 0.5=50%, 2=200%,依次類(lèi)推)
scaleheight :縮放當(dāng)前繪圖的高度(1=100%, 0.5=50%, 2=200%, etc.) +注意：縮放的是整個(gè)畫(huà)布，縮放后，繼續(xù)繪制的圖形會(huì)被放大或縮小。
《3.3.2 位移畫(huà)布》（重點(diǎn)）
ctx.translate(x,y)方法重新映射畫(huà)布上的(0,0)位置
參數(shù)說(shuō)明：
x： 添加到水平坐標(biāo)（x）上的值
y： 添加到垂直坐標(biāo)（y）上的值
發(fā)生位移后，相當(dāng)于把畫(huà)布的0,0坐標(biāo) 更換到新的x,y的位置，所有繪制的新元素都被影響。
位移畫(huà)布一般配合縮放和旋轉(zhuǎn)等。
《3.3.3 旋轉(zhuǎn)》（重點(diǎn)）
context.rotate(angle);方法旋轉(zhuǎn)當(dāng)前的繪圖
l注意參數(shù)是弧度（PI）
l如需將角度轉(zhuǎn)換為弧度，請(qǐng)使用degrees*Math.PI/180公式進(jìn)行計(jì)算。
《3.3 繪制環(huán)境保存和還原》（重要）
ctx.save()保存當(dāng)前環(huán)境的狀態(tài)
可以把當(dāng)前繪制環(huán)境進(jìn)行保存到緩存中。
ctx.restore()返回之前保存過(guò)的路徑狀態(tài)和屬性
獲取最近緩存的ctx
一般配合位移畫(huà)布使用。
《3.4 設(shè)置繪制環(huán)境的透明度》（了解）
context.globalAlpha=number;
number:透明值。必須介于0.0（完全透明） 與1.0（不透明） 之間。
設(shè)置透明度是全局的透明度的樣式。注意是全局的。
《3.5 畫(huà)布限定區(qū)域繪制》（了解）
ctx.clip();方法從原始畫(huà)布中剪切任意形狀和尺寸
l一旦剪切了某個(gè)區(qū)域，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi)（不能訪(fǎng)問(wèn)畫(huà)布上的其他區(qū)域）
l一般配合繪制環(huán)境的保存和還原。
《3.6 畫(huà)布保存base64編碼內(nèi)容》（重要）
把canvas繪制的內(nèi)容輸出成base64內(nèi)容。
語(yǔ)法：
canvas.toDataURL(type, encoderOptions);
例如：
canvas.toDataURL("image/jpg",1);
參數(shù)說(shuō)明：
type，設(shè)置輸出的類(lèi)型，比如image/png image/jpeg等
encoderOptions：0-1之間的數(shù)字，用于標(biāo)識(shí)輸出圖片的質(zhì)量，1表示無(wú)損壓縮，類(lèi)型為：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對(duì)象
img.src = canvas.toDataURL("image/png"); ? ? ?//將畫(huà)布的內(nèi)容給圖片標(biāo)簽顯示
《3.7 畫(huà)布渲染畫(huà)布》（重要）
context.drawImage(img,x,y);
img參數(shù)也可以是畫(huà)布，也就是把一個(gè)畫(huà)布整體的渲染到另外一個(gè)畫(huà)布上。
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); ? ? ?//在第一個(gè)畫(huà)布上繪制矩形
ctx2.drawImage(canvas1, 10, 10); ? ?//將第一個(gè)畫(huà)布整體繪制到第二個(gè)畫(huà)布上
《3.8 了解：線(xiàn)條樣式》（了解）
lineCap設(shè)置或返回線(xiàn)條的結(jié)束端點(diǎn)(線(xiàn)頭、線(xiàn)冒)樣式
butt： 默認(rèn)。向線(xiàn)條的每個(gè)末端添加平直的邊緣。
翻譯.：屁股；煙頭；笑柄；靶垛；粗大的一端 英[b?t]美[b?t]
round： 向線(xiàn)條的每個(gè)末端添加圓形線(xiàn)帽。
square： 向線(xiàn)條的每個(gè)末端添加正方形線(xiàn)帽。
lineJoin設(shè)置或返回兩條線(xiàn)相交時(shí)，所創(chuàng)建的拐角類(lèi)型
bevel:創(chuàng)建斜角。
翻譯.斜角；斜面；[測(cè)]斜角規(guī) 英['bev(?)l]美['b?vl]
round:創(chuàng)建圓角。
miter:默認(rèn)。創(chuàng)建尖角
lineWidth設(shè)置或返回當(dāng)前的線(xiàn)條寬度
miterLimit設(shè)置或返回最大斜接長(zhǎng)度
意思:斜接 英['ma?t?]
斜接長(zhǎng)度指的是在兩條線(xiàn)交匯處內(nèi)角和外角之間的距離。
一般用默認(rèn)值：10就可以了。除非需要特別長(zhǎng)的尖角時(shí)，使用此屬性。
《3.9 了解貝塞爾曲線(xiàn)》（知道有）
《3.9.1 繪制一條二次方曲線(xiàn)》
微軟的畫(huà)圖板中的曲線(xiàn)的顏色。
quadratic：二次方的意思， 英[kw?'dr?t?k]美[kwɑ'dr?t?k]
Curve：曲線(xiàn)的意思， 英[k??v]美[k?v]
語(yǔ)法：
context.quadraticCurveTo(cpx,cpy,x,y);
參數(shù)：
cpx： 貝塞爾控制點(diǎn)的x坐標(biāo)
cpy： 貝塞爾控制點(diǎn)的y坐標(biāo)
x： 結(jié)束點(diǎn)的x坐標(biāo)
y： 結(jié)束點(diǎn)的y坐標(biāo)
ctx.beginPath();
ctx.moveTo(20,20);
//繪制2次方曲線(xiàn)，貝賽爾曲線(xiàn)
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
《3.9.2 繪制貝塞爾曲線(xiàn)》（知道有）
繪制一條三次貝塞爾曲線(xiàn)
語(yǔ)法：
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
提示：
三次貝塞爾曲線(xiàn)需要三個(gè)點(diǎn)。前兩個(gè)點(diǎn)是用于三次貝塞爾計(jì)算中的控制點(diǎn)，第三個(gè)點(diǎn)是曲線(xiàn)的結(jié)束點(diǎn)。曲線(xiàn)的開(kāi)始點(diǎn)是當(dāng)前路徑中最后一個(gè)點(diǎn)。如果路徑不存在，那么請(qǐng)使用beginPath()和moveTo()方法來(lái)定義開(kāi)始點(diǎn)。
參數(shù)說(shuō)明：
cp1x： 第一個(gè)貝塞爾控制點(diǎn)的x坐標(biāo)
cp1y： 第一個(gè)貝塞爾控制點(diǎn)的y坐標(biāo)
cp2x： 第二個(gè)貝塞爾控制點(diǎn)的x坐標(biāo)
cp2y： 第二個(gè)貝塞爾控制點(diǎn)的y坐標(biāo)
x:結(jié)束點(diǎn)的x坐標(biāo)
y:結(jié)束點(diǎn)的y坐標(biāo)
//繪制復(fù)雜的貝塞爾曲線(xiàn)
ctx.beginPath();
ctx.moveTo(400,400);
//參數(shù)說(shuō)明：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
// cp1x： 第一個(gè)貝塞爾控制點(diǎn)的x坐標(biāo)
// cp1y： 第一個(gè)貝塞爾控制點(diǎn)的y坐標(biāo)
// cp2x： 第二個(gè)貝塞爾控制點(diǎn)的x坐標(biāo)
// cp2y： 第二個(gè)貝塞爾控制點(diǎn)的y坐標(biāo)
// x:結(jié)束點(diǎn)的x坐標(biāo)
// y:結(jié)束點(diǎn)的y坐標(biāo)
ctx.bezierCurveTo(500, 200, 600, 600, 700, 300);
ctx.stroke();
《3.10了解創(chuàng)建兩條切線(xiàn)的弧》（知道有）
在畫(huà)布上創(chuàng)建介于當(dāng)前起點(diǎn)和兩個(gè)點(diǎn)形成的夾角的切線(xiàn)之間的弧
語(yǔ)法：
context.arcTo(x1,y1,x2,y2,r); //類(lèi)比：css3中的圓角。
例如：
ctx.arcTo(240, 100, 240, 110, 40);
參數(shù)：
x1:弧的端點(diǎn)1的x坐標(biāo)
y1:弧的端點(diǎn)1的y坐標(biāo)
x2:弧的端點(diǎn)2(終點(diǎn))的x坐標(biāo)
y2:弧的端點(diǎn)2(終點(diǎn))的y坐標(biāo)
r :弧的半徑
//代碼demo：
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,100);
//context.arcTo(x1,y1,x2,y2,r); //類(lèi)比：css3中的圓角。
ctx.arcTo(240, 100, 240, 110, 40);
ctx.lineTo(240, 300);
ctx.stroke();
《3.11了解判斷點(diǎn)是否在路徑中》（知道有）
context.isPointInPath(x,y);
//isPointInPath()方法返回true，如果指定的點(diǎn)位于當(dāng)前路徑中；否則返回false。
//判斷x,y坐標(biāo)的點(diǎn)是否在當(dāng)前的路徑中。
《3.12了解文本寬度計(jì)算》（知道有）
context.measureText(text).width;
《3.13其他》
如果以后做canvas游戲方向開(kāi)發(fā)深入學(xué)習(xí)可以擴(kuò)展內(nèi)以下容：
lsetTransform()將當(dāng)前轉(zhuǎn)換重置為單位矩陣。然后運(yùn)行transform()
ltransform()替換繪圖的當(dāng)前轉(zhuǎn)換矩陣
lglobalCompositeOperation設(shè)置或返回新圖像如何繪制到已有的圖像上
l像素操作
e
