好程序員分享24個canvas基礎知識小結

　　好程序員分享24個canvas基礎知識小結，很是全面詳盡，推薦給你們。

　　現把canvas的知識點總結以下，以便隨時查閱。

　　一、填充矩形 fillRect(x,y,width,height);

　　二、繪製矩形邊框 strokeRect(x,y,width,height);

　　三、擦除矩形 clearRect(x,y,width,height);

　　四、填充樣式 fillStyle="red"; 樣式能夠爲顏色、漸變和圖像。

　　五、描邊樣式 strokeStyle="red";

　　六、描邊線條的寬度 lineWidth=4;

　　七、線條末端形狀 lineCap="butt"; butt(對接)/round(圓)/square(方)，默認狀況下是butt;

　　八、線條相交樣式 lineJoin="miter"; miter(尖角)/round(圓角)/bevel(斜角),默認尖角;

　　九、開始繪製路徑 beginPath();

　　十、結束路徑 closePath(); 建立路徑後，若是想繪製一條鏈接到路徑起點的線條，能夠調用closePath();

　　十一、繪製圓弧 arc(x,y,radius,startAngle,endAngle,true/false);

　　十二、繪製弧線 arcTo(x1,y1,x2,y2,radius) 從上一點開始繪製一天弧線，到x2,y2爲止，而且以給定的半徑radius穿過x1,y1;

　　1三、moveTO(x,y); 將繪圖遊標移動到(x,y),不畫線

　　1四、lineTo(x,y); 從上一點開始繪製一條直線

　　1五、二次貝塞爾曲線： quadraticCurveTo(cx,cy,x,y); 從上一點開始繪製二次曲線，到x,y爲止，cx,cy做爲控制點。

　　1六、三次貝塞爾曲線： bezierCurveTo(cx1,cy1,cx2,cy2,x,y); 從上一點開始繪製二次曲線，到x,y爲止，cx1,cy1和cx2,cy2做爲控制點。

　　1七、rect(x,y,width,height);從點x,y開始繪製矩形，寬度和高度分別由width和height指定。這個方法繪製的是矩形路徑，而不是獨立形狀。

　　1八、繪製文本：

　　(1) 填充文本：fillText("hello",x,y,width);width爲可選的最大像素寬度,若是文本大於最大寬度，則文本會收縮以適應最大寬度。

　　(2) 文本描邊：strokeText("hello",x,y,width);width爲可選的最大像素寬度。

　　(3) 文本樣式：font="bold 14px Arial";

　　(4) 水平文本對齊：textAlign='start'; // start, end, left,right, center。默認值:start。以文字的起始點(x,y)爲基點的縱軸進行對齊。

　　(5) 垂直文本對齊：textBaseline='alphabetic'; //top, hanging, middle,alphabetic, ideographic, bottom。

      默認值：alphabetic。以文字的起始點(x,y)爲基點的橫軸進行對齊。

　　(6) 文本的寬度：var text="hello"; var length=context.measureText(text);參數text爲所須要繪製的文字

　　1九、變換

　　(1) rotate(angle):圍繞原點旋轉圖像angle弧度。

　　(2) scale(x,y):縮放圖像。也能夠使用transform(x,0,0,y,0,0);

　　(3) translate(x,y):將座標原點移動到x,y，執行這個變換以後，座標0,0會變成以前由x,y表示的點。

　　(4) transform(, , ,,x, y);

　　(5) setTransform(, , ,,x, y);將變換矩陣重置爲默認狀態，而後再調用transform();

　　20、圖形組合

　　代碼以下:

　　context.fillStyle="blue";

　　context.fillRect(10,10,100,100);

　　context.globalCompositeOperation='lighter'; 可選值如/ /內。

　　context.fillStyle="red";

　　context.arc(110,60,50,0,Math.PI*2,false);

　　context.fill();

　　/*

　　source-over(默認值)：

　　destination-over：在原有圖形之下繪製新圖形

　　source-in：新圖形與原有圖形做in運算，只顯示新圖形中與原有圖形相重疊的部分

　　destination-in：原有圖形與新圖形做in運算，只顯示新圖形中與原有圖形相重疊的部分

　　source-out：新圖形與原有圖形做out運算，只顯示新圖形中與原有圖形不重疊的部分

　　destination-out：新圖形與原有圖形做out運算，只顯示新圖形中與原有圖形不重疊的部分

　　source-atop：只繪製新圖形中與原有圖形重疊的部分和未被重疊的原有圖形

　　destination-atop：只繪製原有圖形中被新圖形重疊的部分和新圖形的其餘部分

　　lighter：原有圖形與新圖形均繪製，重疊部分作加色處理

　　xor：只繪製新圖形與原有圖形不重疊的部分，重疊部分變透明

　　copy：只繪製新圖形

　　*/

　　2一、繪製圖形陰影

　　代碼以下:

　　context.shadowOffsetX=10; //陰影的橫向位移量

　　context.shadowOffsetY=10; //陰影的縱向位移量

　　context.shadowColor='rgba(100,100,100,0.5)'; //陰影的顏色

　　context.shadowBlur=7; //陰影的模糊範圍

　　2二、繪製、平鋪、裁剪圖像

　　代碼以下:

　　context.drawImage(image,x,y);

　　context.drawImage(image,x,y,w,h);

　　context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);sx,sy和sw,sh爲源圖像的被複制區域的起始座標和高度，dx,dy和dw,dh爲複製後的區域的目標座標和高度。

　　context.createPattern(image,type);圖像平鋪，參數能夠爲：no-repeat,repeat-x,repeat-y,repeat;

　　context.clip(); //裁剪功能

　　例子：

　　代碼以下:

　　image=new Image(); //建立Image對象

　　image.src="../images/wukong.gif";

　　var test=context.createPattern(image,'repeat-y');//createPattern設置平鋪效果，

　　context.fillStyle=test;

　　context.fillRect(0,0,400,400);

　　image.onload=function() { //此方法的做用是，若是圖片是比較大的網絡圖像文件，防止圖像所有裝載完畢纔看見該圖像，這樣就能夠一邊裝載一邊繪製了。

　　drawImg(context,image);

　　}

　　function drawImg(context,image){

　　//繪製原始圖像

　　context.drawImage(image,10,10,125,125);

　　//局部放大

　　context.drawImage(image,20,0,90,100,150,10,125,125);

　　context.rect(20,20,80,80);

　　context.clip();

　　context.drawImage(image,0,0,200,200);

　　}

　　2三、保存、恢復

　　contex.save();將當前狀態保存到棧中。注意：保存的只是對繪製圖形的設置和變換，不會保存繪製圖形的內容。

　　context.restore();從棧中取出以前保存的圖形狀態

　　能夠應用的場合：

　　(1)圖像或圖形變形

　　(2)圖像裁剪

　　2四、線性漸變

　　代碼以下:

　　var g=context.createLinearGradient(xStart,yStart,xEnd,yEnd);

　　var g1=context.createRadialGradient(xStart,yStrat,radiusStrat,xEnd,yEnd,radiusEnd);

　　g.addColorStop(0,'red');

　　g.addColorStop(0,'green');

　　context.fillStyle=g;

　　context.fillRect(0,0,200,200);