獲取dom

<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標(biāo)簽憔购。
</canvas>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

1.充填顏色以及充填

context.fillStyle=color|gradient|pattern;

context.fillRect(x,y,width,height);
x 矩形左上角的 x 坐標(biāo)吹截。
y 矩形左上角的 y 坐標(biāo)督怜。
width 矩形的寬度茅信，以像素計(jì)厂榛。
height 矩形的高度，以像素計(jì)耿戚。

ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);

2.繪畫顏色以及繪畫

context.strokeStyle=color|gradient|pattern;

ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,150,100);

3.設(shè)置陰影顏色，陰影的模糊級別惊完，shadowBlur與shadowColor兩者要一起使用

context.shadowBlur=number;
context.shadowColor=color;

ctx.shadowBlur=20;
ctx.fillStyle="red";
ctx.shadowColor="black";
ctx.fillRect(20,20,100,80);
ctx.shadowColor="blue";
ctx.fillRect(140,20,100,80);

4.設(shè)置陰影與形狀的水平、垂直距離处硬。

context.shadowOffsetX=number;
context.shadowOffsetY=number;
number 正值或負(fù)值小槐。

ctx.shadowBlur=10;
ctx.shadowOffsetX=20;
ctx.shadowOffsetY=20;
ctx.shadowColor="black";
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80);

5.創(chuàng)建線性的漸變對象。

context.createLinearGradient(x0,y0,x1,y1);
x0 漸變開始點(diǎn)的 x 坐標(biāo)
y0 漸變開始點(diǎn)的 y 坐標(biāo)
x1 漸變結(jié)束點(diǎn)的 x 坐標(biāo)
y1 漸變結(jié)束點(diǎn)的 y 坐標(biāo)

定義從黑到白的漸變（從左向右）荷辕，作為矩形的填充樣式：

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

思考1：創(chuàng)建從上到下的漸變效果如何實(shí)現(xiàn)：

思考1答案：

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

思考2：定義一個從黑到紅再到白的漸變凿跳，作為矩形的橫線填充樣式：

思考2答案：

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

6.在水平和垂直方向重復(fù)元素

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
元素可以是圖片、視頻疮方，或者其他 <canvas> 元素控嗜。

<img src="img_lamp.jpg" id="lamp">
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.clearRect(0,0,c.width,c.height); 
var img=document.getElementById("lamp")
var pat=ctx.createPattern(img,'repeat');
ctx.rect(0,0,220,128);
ctx.fillStyle=pat;
ctx.fill();

7.創(chuàng)建放射狀/圓形漸變對象

context.createRadialGradient(x0,y0,r0,x1,y1,r1);
x0 漸變的開始圓的 x 坐標(biāo)
y0 漸變的開始圓的 y 坐標(biāo)
r0 開始圓的半徑
x1 漸變的結(jié)束圓的 x 坐標(biāo)
y1 漸變的結(jié)束圓的 y 坐標(biāo)
r1 結(jié)束圓的半徑

var grd=ctx.createRadialGradient(75,75,5,75,75,75);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(0,0,150,150);

8.規(guī)定漸變對象中的顏色和位置

addColorStop() 方法與 createLinearGradient()或 createRadialGradient() 一起使用

gradient.addColorStop(stop,color);
stop介于 0.0 與 1.0 之間的值，表示漸變中開始與結(jié)束之間的位置骡显。
color在 stop 位置顯示的 CSS 顏色值疆栏。

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100); 

9.線條末端線帽的樣式。

context.lineCap="butt|round|square";
butt 默認(rèn)惫谤。向線條的每個末端添加平直的邊緣壁顶。
round 向線條的每個末端添加圓形線帽。
square 向線條的每個末端添加正方形線帽溜歪。

ctx.beginPath();
ctx.lineWidth=10;
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.stroke();

10.創(chuàng)建邊角的類型

context.lineJoin="bevel|round|miter";
bevel 創(chuàng)建斜角若专。
round 創(chuàng)建圓角。
miter 默認(rèn)蝴猪。創(chuàng)建尖角富岳。

ctx.beginPath();
ctx.lineWidth=10;
ctx.lineJoin="round";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();

11.設(shè)置當(dāng)前線條的寬度

context.lineWidth=number;
number 當(dāng)前線條的寬度，以像素計(jì)拯腮。

ctx.lineWidth=10;
ctx.strokeRect(20,20,80,100);

12.設(shè)置最大斜接長度。

miterLimit 屬性設(shè)置或返回最大斜接長度蚁飒。
斜接長度指的是在兩條線交匯處內(nèi)角和外角之間的距離动壤。

只有當(dāng) lineJoin 屬性為 "miter" 時，miterLimit 才有效淮逻。miter尖角琼懊，bevel為鈍角阁簸，round為圓角。

ctx.lineWidth=10;
ctx.lineJoin="miter";//miter尖角哼丈，lineJoin =“bevel”為鈍角
ctx.miterLimit=4;//miterLimit 4(然后,斜接長度將超過斜接限制)
ctx.moveTo(20,20);
ctx.lineTo(50,27);
ctx.lineTo(20,34);
ctx.stroke();

13.創(chuàng)建矩形

提示：使用 stroke或者fill方法在畫布上實(shí)際地繪制矩形启妹。
x 矩形左上角的 x 坐標(biāo)荷逞。
y 矩形左上角的 y 坐標(biāo)啄清。
width 矩形的寬度，以像素計(jì)睦刃。
height 矩形的高度车胡，以像素計(jì)檬输。

fillRect() = rect() + fill()
strokeRect() = rect() + stroke()

ctx.rect(20,20,150,100);
ctx.stroke();

14.充填創(chuàng)建的矩形

context.fillRect(x,y,width,height);
x 矩形左上角的 x 坐標(biāo)。
y 矩形左上角的 y 坐標(biāo)匈棘。
width 矩形的寬度丧慈，以像素計(jì)。
height 矩形的高度主卫，以像素計(jì)逃默。

ctx.fillRect(20,20,150,100);

15.繪制矩形

ctx.strokeRect(20,20,150,100);

ctx.strokeRect(20,20,150,100);

16.清空給定矩形內(nèi)的指定像素

context.clearRect(x,y,width,height);
x 要清除的矩形左上角的 x 坐標(biāo)。
y 要清除的矩形左上角的 y 坐標(biāo)簇搅。
width 要清除的矩形的寬度完域，以像素計(jì)。
height 要清除的矩形的高度馍资，以像素計(jì)筒主。

ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);

17.填充當(dāng)前的圖像

context.fill();

ctx.rect(20,20,150,100);
ctx.fillStyle="red";
ctx.fill();

18.繪制出通過 moveTo() 和 lineTo() 方法定義的路徑

context.stroke();
提示：請使用 strokeStyle屬性來繪制另一種顏色/漸變。

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.strokeStyle="red";
ctx.stroke();

19.開始一條路徑鸟蟹，斬?cái)嗯c上一個路徑之間的耦合

context.beginPath();

提示：請使用這些方法來創(chuàng)建路徑 moveTo()乌妙、lineTo()、quadricCurveTo()建钥、bezierCurveTo()藤韵、arcTo() 和 arc()。
提示：請使用 stroke() 方法在畫布上繪制確切的路徑熊经。

ctx.beginPath();              
ctx.lineWidth="5";
ctx.strokeStyle="green";  // 綠色路徑
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke();  // 畫 
ctx.beginPath();
ctx.strokeStyle="purple";  // 紫色的路徑
ctx.moveTo(50,0);
ctx.lineTo(150,130);            
ctx.stroke();  // 畫

如果不使用beginPath這個方法泽艘，那么這兩條線繪制出來將都是紫色的。

20.把路徑移動到畫布中的指定點(diǎn)镐依。

context.moveTo(x,y);
x 路徑的目標(biāo)位置的 x 坐標(biāo)匹涮。
y 路徑的目標(biāo)位置的 y 坐標(biāo)。

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

21.創(chuàng)建從當(dāng)前點(diǎn)到開始點(diǎn)的路徑

context.closePath();

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();

22.創(chuàng)建從該點(diǎn)到畫布中最后指定點(diǎn)的線條槐壳。

context.lineTo(x,y);
x 路徑的目標(biāo)位置的 x 坐標(biāo)然低。
y 路徑的目標(biāo)位置的 y 坐標(biāo)。

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

23.剪切限制在canvas繪畫的區(qū)域。

//剪切一個矩形區(qū)域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
//剪切之后畫一個矩形
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);

24.創(chuàng)建一條二次貝塞爾曲線

context.quadraticCurveTo(cpx,cpy,x,y);
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)吨灭。

![](https://upload-images.jianshu.io/upload_images/21646748-232688b83e9dad0f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();

25.創(chuàng)建一個三次貝塞爾曲線

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
cp1x 第一個貝塞爾控制點(diǎn)的 x 坐標(biāo)刚照。
cp1y 第一個貝塞爾控制點(diǎn)的 y 坐標(biāo)。
cp2x 第二個貝塞爾控制點(diǎn)的 x 坐標(biāo)喧兄。
cp2y 第二個貝塞爾控制點(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);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();

26.創(chuàng)建圓或者弧

context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x 圓的中心的 x 坐標(biāo)檩互。
y 圓的中心的 y 坐標(biāo)。
r 圓的半徑咨演。
sAngle 起始角闸昨，以弧度計(jì)（弧的圓形的三點(diǎn)鐘位置是 0 度）。
eAngle 結(jié)束角薄风，以弧度計(jì)饵较。
counterclockwise 可選。規(guī)定應(yīng)該逆時針還是順時針繪圖遭赂。False = 順時針循诉，true = 逆時針。

ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

27.創(chuàng)建介于兩個切線之間的弧

context.arcTo(x1,y1,x2,y2,r);
x1 兩切線交點(diǎn)的橫坐標(biāo)撇他。
y1 兩切線交點(diǎn)的縱坐標(biāo)茄猫。
x2 第二條切線上一點(diǎn)的橫坐標(biāo)。
y2 第二條切線上一點(diǎn)的縱坐標(biāo)困肩。
r 弧的半徑划纽。

ctx.beginPath();     
ctx.moveTo(20,20);             //創(chuàng)建一個起點(diǎn)
ctx.lineTo(100,20);            // 創(chuàng)建一個水平線
ctx.arcTo(150,20,150,70,50);   // 創(chuàng)建一個弧
ctx.lineTo(150,120);           // 繼續(xù)垂直線
ctx.stroke();                  //繪畫

28.查看指定的點(diǎn)位是否在路徑中

context.isPointInPath(x,y);
是則返回 true，否則返回 false
x 要測試的 x 坐標(biāo)锌畸。
y 要測試的 y 坐標(biāo)勇劣。

ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50))
{
    ctx.stroke();
};

29.縮放當(dāng)前繪圖

context.scale(scalewidth,scaleheight);
scalewidth 縮放當(dāng)前繪圖的寬度（1=100%，0.5=50%潭枣，2=200%比默，依次類推）。
scaleheight 縮放當(dāng)前繪圖的高度（1=100%盆犁，0.5=50%命咐，2=200%，依次類推）谐岁。

ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

30.旋轉(zhuǎn)當(dāng)前的繪圖

context.rotate(angle);
angle 旋轉(zhuǎn)角度醋奠，以弧度計(jì)瓮下。
如需將角度轉(zhuǎn)換為弧度，請使用 degreesMath.PI/180 公式進(jìn)行計(jì)算钝域。
實(shí)例：如需旋轉(zhuǎn) 5 度，可規(guī)定下面的公式：5Math.PI/180锭魔。

ctx.rotate(20*Math.PI/180);
ctx.fillRect(50,20,100,50);

31.重新映射畫布上的 (0,0) 位置

context.translate(x,y);
x 添加到水平坐標(biāo)（x）上的值例证。
y 添加到垂直坐標(biāo)（y）上的值。

ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);

32.替換當(dāng)前的變換矩陣

context.transform(a,b,c,d,e,f);
a 水平縮放繪圖迷捧。
b 水平傾斜繪圖织咧。
c 垂直傾斜繪圖。
d 垂直縮放繪圖漠秋。
e 水平移動繪圖笙蒙。
f 垂直移動繪圖。

transform參數(shù)的詳細(xì)解釋可以參考文獻(xiàn)：https://blog.csdn.net/S3328047358/article/details/107867712

此方法太難不常用可以直接跳過庆锦，數(shù)學(xué)好的可以去仔細(xì)研究

平移：translate 其實(shí)就是對 e和f的變換捅位， e 代表x的平移量，f代表y的平移量
transform(1, 0, 0, 1, 10, 20) = translate(10, 20),x平移10搂抒，y平移20

33.設(shè)置文本內(nèi)容字體屬性

context.font="italic small-caps bold 12px arial";

font-style:現(xiàn)有選項(xiàng)支持是否需要傾斜的樣式艇搀。
font-variant：現(xiàn)有選項(xiàng)支持字體是否全部轉(zhuǎn)化為大寫。
font-weight：字體的粗細(xì)求晶。
font-size：字體大小

ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

34.文本內(nèi)容的當(dāng)前對齊方式

context.textAlign="center|end|left|right|start";
start 默認(rèn)焰雕。文本在指定的位置開始。
end 文本在指定的位置結(jié)束芳杏。
center 文本的中心被放置在指定的位置矩屁。
left 文本在指定的位置開始。
right 文本在指定的位置結(jié)束爵赵。

//在位置150創(chuàng)建一個紅色線
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";    
// 表明不同TextAlign值
ctx.textAlign="start";      
ctx.fillText("textAlign=start",150,60);        
ctx.textAlign="end";      
ctx.fillText("textAlign=end",150,80);                  
ctx.textAlign="left";      
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";     
ctx.fillText("textAlign=center",150,120);              
ctx.textAlign="right";      
ctx.fillText("textAlign=right",150,140);

35.繪制文本時的當(dāng)前文本基線

context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
alphabetic 默認(rèn)吝秕。文本基線是普通的字母基線。
top 文本基線是 em 方框的頂端亚再。
hanging 文本基線是懸掛基線郭膛。
middle 文本基線是 em 方框的正中。
ideographic 文本基線是表意基線氛悬。
bottom 文本基線是 em 方框的底端则剃。

//在Y = 100畫一條紅線
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//每個在y = 100的單詞有不同的textbaseline值
ctx.textBaseline="top"; 
ctx.fillText("Top",5,100); 
ctx.textBaseline="bottom"; 
ctx.fillText("Bottom",50,100); 
ctx.textBaseline="middle"; 
ctx.fillText("Middle",120,100); 
ctx.textBaseline="alphabetic"; 
ctx.fillText("Alphabetic",190,100); 
ctx.textBaseline="hanging"; 
ctx.fillText("Hanging",290,100); 

36.在畫布上繪制的“被填色”的文本

context.fillText(text,x,y,maxWidth);
text 規(guī)定在畫布上輸出的文本。
x 開始繪制文本的 x 坐標(biāo)位置（相對于畫布）如捅。
y 開始繪制文本的 y 坐標(biāo)位置（相對于畫布）棍现。
maxWidth 可選。允許的最大文本寬度镜遣，以像素計(jì)己肮。

ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";
// 創(chuàng)建一個漸變
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 填充一個漸變
ctx.fillStyle=gradient;
ctx.fillText("Big smile!",10,90);

37.在畫布上繪制無充填文本士袄。

context.strokeText(text,x,y,maxWidth);
text 規(guī)定在畫布上輸出的文本。
x 開始繪制文本的 x 坐標(biāo)位置（相對于畫布）谎僻。
y 開始繪制文本的 y 坐標(biāo)位置（相對于畫布）娄柳。
maxWidth 可選。允許的最大文本寬度艘绍，以像素計(jì)赤拒。

ctx.font="20px Georgia";
ctx.strokeText("Hello World!",10,50);
ctx.font="30px Verdana";
// 創(chuàng)建一個漸變
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 填充一個漸變
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,90);

38.計(jì)算指定字體寬度

context.measureText(text).width;
返回一個對象，該對象包含以像素計(jì)的指定字體寬度诱鞠。
text 要測量的文本挎挖。

ctx.font="30px Arial";
var txt="Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width,10,50);
ctx.fillText(txt,10,100);

39.在畫布上繪制圖像。

context.drawImage(img,x,y);
img 規(guī)定要使用的圖像航夺、畫布或視頻蕉朵。
sx 可選。開始剪切的 x 坐標(biāo)位置阳掐。
sy 可選始衅。開始剪切的 y 坐標(biāo)位置。
swidth 可選锚烦。被剪切圖像的寬度觅闽。
sheight 可選。被剪切圖像的高度涮俄。
x 在畫布上放置圖像的 x 坐標(biāo)位置蛉拙。
y 在畫布上放置圖像的 y 坐標(biāo)位置。
width 可選彻亲。要使用的圖像的寬度（伸展或縮小圖像）孕锄。
height 可選。要使用的圖像的高度（伸展或縮小圖像）苞尝。

var img=document.getElementById("scream");
img.onload = function()
{
    ctx.drawImage(img,10,10);
}

39.2在畫布上繪制圖像并指明大小

context.drawImage(img,x,y,width,height);

var img=document.getElementById("scream");
img.onload = function()
{
    ctx.drawImage(img,10,10,150,180);
}

39.3剪切圖片畸肆，并在畫布上對被剪切的部分進(jìn)行定位：

document.getElementById("scream").onload=function()
{
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    ctx.drawImage(img,90,130,50,60,10,10,50,60);
};

39.4 在canvas中模擬視頻播放

var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play', function() 
{
    var i=window.setInterval(function() {ctx.drawImage(v,5,5,260,125)},20);
},false);
v.addEventListener('pause',function() 
{
    window.clearInterval(i);
},false);
v.addEventListener('ended',function() 
{
    clearInterval(i);
},false);  

40.ImageData 對象的屬性

var imgData=ctx.createImageData(100,100);

width、height宙址、data
width 屬性返回 ImageData 對象的寬度轴脐，以像素計(jì)。
height 屬性返回 ImageData 對象的高度抡砂，以像素計(jì)大咱。
data 屬性返回一個對象，該對象包含指定的 ImageData 對象的圖像數(shù)據(jù)注益。
即 RGBA 值：
R - 紅色（0-255）
G - 綠色（0-255）
B - 藍(lán)色（0-255）
A - alpha 通道（0-255; 0 是透明的碴巾，255 是完全可見的）

41.創(chuàng)建新的空白 ImageData 對象

var imgData=ctx.createImageData(100,100);
width ImageData 對象的寬度，以像素計(jì)丑搔。
height ImageData 對象的高度厦瓢，以像素計(jì)提揍。

var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
{
    imgData.data[i+0]=255;
    imgData.data[i+1]=0;
    imgData.data[i+2]=0;
    imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,10);

42.獲取ImageData對象，將ImageData對象放到畫布上煮仇。

context.getImageData(x,y,width,height);
x 開始復(fù)制的左上角位置的 x 坐標(biāo)（以像素計(jì)）劳跃。
y 開始復(fù)制的左上角位置的 y 坐標(biāo)（以像素計(jì)）。
width 要復(fù)制的矩形區(qū)域的寬度浙垫。
height 要復(fù)制的矩形區(qū)域的高度售碳。

context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
imgData 規(guī)定要放回畫布的 ImageData 對象。
x ImageData 對象左上角的 x 坐標(biāo)绞呈，以像素計(jì)。
y ImageData 對象左上角的 y 坐標(biāo)间景，以像素計(jì)佃声。
dirtyX 可選。水平值（x）倘要，以像素計(jì)圾亏，在畫布上放置圖像的位置。
dirtyY 可選封拧。垂直值（y）志鹃，以像素計(jì)，在畫布上放置圖像的位置泽西。
dirtyWidth 可選曹铃。在畫布上繪制圖像所使用的寬度。
dirtyHeight 可選捧杉。在畫布上繪制圖像所使用的高度陕见。

ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
    var imgData=ctx.getImageData(10,10,50,50);
    ctx.putImageData(imgData,10,70);
}

43.設(shè)置全局透明度

context.globalAlpha=number;
number 透明值。必須介于 0.0（完全透明） 與 1.0（不透明） 之間味抖。

ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
//轉(zhuǎn)換透明度
ctx.globalAlpha=0.2;
ctx.fillStyle="blue"; 
ctx.fillRect(50,50,75,50); 
ctx.fillStyle="green"; 
ctx.fillRect(80,80,75,50);

44.目標(biāo)圖像上顯示源圖像

context.globalCompositeOperation="source-in";
常用屬性：
source-over 默認(rèn)评甜。在目標(biāo)圖像上顯示源圖像。
destination-over 在源圖像上顯示目標(biāo)圖像仔涩。

ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.fillStyle="blue";   
ctx.globalCompositeOperation="source-over";
ctx.fillRect(50,50,75,50);  
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.fillStyle="blue";   
ctx.globalCompositeOperation="destination-over";
ctx.fillRect(180,50,75,50); 

45.toDataURL()

將canvas轉(zhuǎn)換為base64

function imgToBase64(imgSrc, imgType, callback) {
    let type = imgType || 'image/png',
    dataURL,
    img = new Image();
    // 允許資源跨域使用
    img.setAttribute('crossOrigin', 'anonymous');
    img.src = imgSrc;
    img.onload = function () {
        let imgWidth = img.width,
        imgHeight = img.height;

        let canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
        canvas.width = imgWidth;
        canvas.height = imgHeight;
        ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
        dataURL = canvas.toDataURL(type);
        console.log(dataURL);
        callback && callback(dataURL)
        return dataURL
    }
}
function LogConsole(str=''){
    console.log('str:',str)
}
imgToBase64('https://www.runoob.com/wp-content/uploads/2013/11/img_the_scream.jpg','image/jpeg',LogConsole)

查閱此方法參考：https://blog.csdn.net/XuM222222/article/details/82667084

46.sava()跟restore()方法的使用

context.save();

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=3;
ctx.translate(100,100); //將原點(diǎn)左邊設(shè)置到畫布的中間
ctx.save(); //保存當(dāng)前畫布的狀態(tài)忍坷，該狀態(tài)包含了lineWidth=3,translate(100,100),然后其他那些屬性為默認(rèn)值.
ctx.strokeStyle='red'; 
ctx.rotate(Math.PI/2);//坐標(biāo)系統(tǒng)旋轉(zhuǎn)90°
ctx.beginPath();
ctx.moveTo(-100,0);
ctx.lineTo(100,0);
ctx.closePath();
ctx.stroke();
ctx.restore();//恢復(fù)之前保存的繪圖狀態(tài)
ctx.beginPath();
ctx.moveTo(-100,0);
ctx.lineTo(100,0);
ctx.closePath();
ctx.stroke();