《2.6.5 面向對象基礎復習補充：》
創建對象的方式：
* var o = { name: '123', age: 18 }; //json方式創建
* var o = new Object(); ?//通過new的方式創建
* var o = new Persion(); //通過類的構造函數創建
JS中對象的屬性創建方式
* json的方式：var o = { age: 19 };
*直接添加屬性：var o = {}; ?o.age = 19;//太分散了，不利于管理
*由于js動態語言的特性，如果屬性不存在的時候，直接添加屬性。
*構造函數添加屬性
*原型添加公共的屬性
JS的構造函數的原型 構造函數的原型就是：構造對象的模板，構造函數原型里面的所有的屬性和方法都會共享給所有的 構造函數構造出來的所有實例。
【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);
設置png圖片的陰影，圖片透明部分不會被投影。
《3.2 復雜樣式》（了解）
《3.2.1 創建線性漸變的樣式》（了解）
l一般不用，都是用圖片代替，canvas繪制圖片效率更高。
l線性漸變可以用于矩形、圓形、文字等顏色樣式
l線性漸變是一個對象
語法：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; ? ? ? ? ? //關鍵點，把漸變設置到 填充的樣式
《3.2.2 設置圓形漸變（徑向漸變）》了解
創建放射狀/圓形漸變對象?？梢蕴畛湮谋?、形狀等
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
radial半徑的；放射狀的；光線的；光線狀的 英['re?d??l]美['red??l]
參數詳解：
x0:漸變的開始圓的x坐標
y0:漸變的開始圓的y坐標
r0:開始圓的半徑
x1:漸變的結束圓的x坐標
y1:漸變的結束圓的y坐標
r1:結束圓的半徑
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);
《3.2.3 繪制背景圖》（了解）
ctx.createPattern(img,repeat)方法在指定的方向內重復指定的元素了解
pattern：n.模式；圖案；樣品 英['p?t(?)n]美['p?t?n]
第一參數：設置平鋪背景的圖片，第二個背景平鋪的方式。
image： 規定要使用的圖片、畫布或視頻元素。
repeat： 默認。該模式在水平和垂直方向重復。
repeat-x： 該模式只在水平方向重復。
repeat-y： 該模式只在垂直方向重復。
no-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();
《3.3 變換》※（重點）
《3.3.1 縮放》（重點）
scale()方法縮放當前繪圖，更大或更小
語法：context.scale(scalewidth,scaleheight)
scalewidth :縮放當前繪圖的寬度(1=100%, 0.5=50%, 2=200%,依次類推)
scaleheight :縮放當前繪圖的高度(1=100%, 0.5=50%, 2=200%, etc.) +注意：縮放的是整個畫布，縮放后，繼續繪制的圖形會被放大或縮小。
《3.3.2 位移畫布》（重點）
ctx.translate(x,y)方法重新映射畫布上的(0,0)位置
參數說明：
x： 添加到水平坐標（x）上的值
y： 添加到垂直坐標（y）上的值
發生位移后，相當于把畫布的0,0坐標 更換到新的x,y的位置，所有繪制的新元素都被影響。
位移畫布一般配合縮放和旋轉等。
《3.3.3 旋轉》（重點）
context.rotate(angle);方法旋轉當前的繪圖
l注意參數是弧度（PI）
l如需將角度轉換為弧度，請使用degrees*Math.PI/180公式進行計算。
《3.3 繪制環境保存和還原》（重要）
ctx.save()保存當前環境的狀態
可以把當前繪制環境進行保存到緩存中。
ctx.restore()返回之前保存過的路徑狀態和屬性
獲取最近緩存的ctx
一般配合位移畫布使用。
《3.4 設置繪制環境的透明度》（了解）
context.globalAlpha=number;
number:透明值。必須介于0.0（完全透明） 與1.0（不透明） 之間。
設置透明度是全局的透明度的樣式。注意是全局的。
《3.5 畫布限定區域繪制》（了解）
ctx.clip();方法從原始畫布中剪切任意形狀和尺寸
l一旦剪切了某個區域，則所有之后的繪圖都會被限制在被剪切的區域內（不能訪問畫布上的其他區域）
l一般配合繪制環境的保存和還原。
《3.6 畫布保存base64編碼內容》（重要）
把canvas繪制的內容輸出成base64內容。
語法：
canvas.toDataURL(type, encoderOptions);
例如：
canvas.toDataURL("image/jpg",1);
參數說明：
type，設置輸出的類型，比如image/png image/jpeg等
encoderOptions：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設置或返回線條的結束端點(線頭、線冒)樣式
butt： 默認。向線條的每個末端添加平直的邊緣。
翻譯.：屁股；煙頭；笑柄；靶垛；粗大的一端 英[b?t]美[b?t]
round： 向線條的每個末端添加圓形線帽。
square： 向線條的每個末端添加正方形線帽。
lineJoin設置或返回兩條線相交時，所創建的拐角類型
bevel:創建斜角。
翻譯.斜角；斜面；[測]斜角規 英['bev(?)l]美['b?vl]
round:創建圓角。
miter:默認。創建尖角
lineWidth設置或返回當前的線條寬度
miterLimit設置或返回最大斜接長度
意思:斜接 英['ma?t?]
斜接長度指的是在兩條線交匯處內角和外角之間的距離。
一般用默認值：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);
參數：
cpx： 貝塞爾控制點的x坐標
cpy： 貝塞爾控制點的y坐標
x： 結束點的x坐標
y： 結束點的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()方法來定義開始點。
參數說明：
cp1x： 第一個貝塞爾控制點的x坐標
cp1y： 第一個貝塞爾控制點的y坐標
cp2x： 第二個貝塞爾控制點的x坐標
cp2y： 第二個貝塞爾控制點的y坐標
x:結束點的x坐標
y:結束點的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();
《3.10了解創建兩條切線的弧》（知道有）
在畫布上創建介于當前起點和兩個點形成的夾角的切線之間的弧
語法：
context.arcTo(x1,y1,x2,y2,r); //類比：css3中的圓角。
例如：
ctx.arcTo(240, 100, 240, 110, 40);
參數：
x1:弧的端點1的x坐標
y1:弧的端點1的y坐標
x2:弧的端點2(終點)的x坐標
y2:弧的端點2(終點)的y坐標
r :弧的半徑
//代碼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游戲方向開發深入學習可以擴展內以下容：
lsetTransform()將當前轉換重置為單位矩陣。然后運行transform()
ltransform()替換繪圖的當前轉換矩陣
lglobalCompositeOperation設置或返回新圖像如何繪制到已有的圖像上
l像素操作
e
