24個canvas基礎知識小結_html5教學技巧

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

1、填滿矩形 fillRect(x,y,width,height);

2、繪製長方形邊框 strokeRect(x,y,width,height);

3、擦除長方形 clearRect(x,y,width,height);

4、填滿樣式 fillStyle="red"; 樣式可以是顏色、漸層和影像。

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

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

7、線端形狀 lineCap="butt"; butt(對接)/round(圓)/square(方)，預設為butt;

8、線相交樣式 lineJoin="miter"; miter(尖角)/round(圓角)/bevel(斜角),預設尖角;

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

10、結束路徑 closePath(); 建立路徑後，如果想要繪製一條連接到路徑起點的線條，可以呼叫closePath();

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

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

13、moveTO(x,y); 將繪圖遊標移到（x,y）,不畫線

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

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

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

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

18、繪製文字：

　　(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為所需繪製的文字

19、變換

　　(1) rotate(angle):圍繞原點旋轉影像angle弧度。
也可以使用transform(Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),-Math.sin(angle*Math.PI/180),Math. cos(angle*Math.PI/180),0,0);
　　(2) scale(x,y):縮放影像。也可以使用transform(x,0,0,y,0,0);
　　(3) translate(x,y):將座標原點移到x,y，執行這個變換之後，座標0,0會變成之前由x,y表示的點。也可以使用transform(1,0,0,1,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：只繪製新圖形
*/

21、繪製圖形陰影

複製程式碼

程式碼如下:

context.shadowOff的橫向位移量
context.shadowOffsetY=10; //陰影的縱向位移量
context.shadowColor='rgba(100,100,100,0.5)'; //陰影的顏色
context.shadowBlur=7; //陰影的模糊範圍

22、繪製、平鋪、裁切影像

複製程式碼

程式碼如下:

contextdrawImage(image,Image(image,x );
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
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);
}

23、保存、恢復

contex.save();將目前狀態儲存到堆疊中。注意：儲存的只是對繪製圖形的設定和變換，不會儲存繪製圖形的內容。
context.restore();從堆疊中取出先前儲存的圖形狀態
可以套用的場合：
(1)影像或圖形變形
(2)影像裁切
(3)改變圖形上下文時屬性時：fillStyle,font,globalAlpha,globalComposite-Operation,lineCap,lineJoin,lineWidth,miterLimit,shadowBlur,shadowColor,
shadowOffsetX,shadowOffsetY,strokeStyleBase>

24、線性漸層

複製程式碼程式碼如下:

var gcontext.create.created yStart,xEnd,yEnd);
var g1=context.createRadialGradient(xStart,yStrat,radiusStrat,xEnd,yEnd,radiusEnd);
g.addColorStop(0,'red');g.g. (0,'green');
context.fillStyle=g;
context.fillRect(0,0,200,200);