? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? canvas
1.繪制圖片
* 基本繪圖? drawImage(img, x, y)
* 繪圖并設(shè)置大小? drawImage(img, x, y, w, h)
* 裁剪圖片? drwaImage(img, sx, sy, sw, sh, x, y, w, h)? 先寫原圖的左邊大小或渤，在寫畫布的坐標(biāo)大小
2.陰影（了解一下 睦番，少用 性能差）
*類比css3的陰影
* shadowColor 屬性 ?設(shè)置返回用于陰影的顏色
* shadowBlur? 屬性? 模糊值? ·大于1的正整數(shù)洪乍，數(shù)值越高，模糊程度越大
* 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);
//繪制矩形
cxt.fillRect(100,100,200,100);
cxt.fillStyle = "red";
cxt.shadowColor = "pink";
cxt.shadowBlur = 5;
cxt.shadowOffsetX = 5;
cxt.shadowOffsetY = 5;
3.漸變
##### 線性漸變
* createLinearGradient(x0, y0, x1, y1);
* graObj.addColorStop(位置摩窃， 顏色)? 位置是0~1之間的小數(shù)
##### 徑向漸變
* createRedialGradient(x0, y0, r0, x1, y1, r1);
* graObj.addColorStop(位置， 顏色)
5.填充背景
* createPattern(img, repeat)? 第二個(gè)參數(shù)是填充方式
* repeate
* repeate-x
* repeate-y
* no-repeate
* 填充對(duì)象跟漸變對(duì)象類似，相當(dāng)于一種顏色
6.1.變換 - 縮放
scale（w,h）
·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.) +注意：縮放的是整個(gè)畫布，縮放后猎醇，繼續(xù)繪制的圖形會(huì)被放大或縮小窥突。
6.2.變換 - 位移
translate(w, h)
·ctx.translate(x,y)方法重新映射畫布上的(0,0)位置
·參數(shù)說明：
·x： 添加到水平坐標(biāo)（x）上的值
·y： 添加到垂直坐標(biāo)（y）上的值
·發(fā)生位移后，相當(dāng)于把畫布的0,0坐標(biāo) 更換到新的x,y的位置硫嘶，所有繪制的新元素都被影響阻问。
6.3.變換 - 旋轉(zhuǎn)
rotate(angle)? 弧度
·context.rotate(angle);方法旋轉(zhuǎn)當(dāng)前的繪圖
·注意參數(shù)是弧度（PI）
·如需將角度轉(zhuǎn)換為弧度，請(qǐng)使用degrees*Math.PI/180公式進(jìn)行計(jì)算沦疾。
7.繪圖環(huán)境的保存和釋放
*·ctx.save()保存當(dāng)前環(huán)境的狀態(tài)
? ? ? ? o ? ? ?可以把當(dāng)前繪制環(huán)境進(jìn)行保存到緩存中称近。
* ctx.restore()? 釋放前面保存的繪圖環(huán)境
? ? ? ? ? ? ? ?o ? 獲取最近緩存的ctx
·一般配合位移畫布使用。
8.設(shè)置繪制環(huán)境的透明度（了解）
·context.globalAlpha=number;
·number:透明值哮塞。必須介于0.0（完全透明） 與1.0（不透明） 之間刨秆。
·設(shè)置透明度是全局的透明度的樣式。注意是全局的忆畅。
9.畫布限定區(qū)域繪制（了解）
·ctx.clip();方法從原始畫布中剪切任意形狀和尺寸
·一旦剪切了某個(gè)區(qū)域衡未，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi)（不能訪問畫布上的其他區(qū)域）
·一般配合繪制環(huán)境的保存和還原。
10.畫布保存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)識(shí)輸出圖片的質(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對(duì)象
img.src = canvas.toDataURL("image/png"); ?????//將畫布的內(nèi)容給圖片標(biāo)簽顯示
