24個(gè)canvas基礎(chǔ)知識(shí)小結(jié)
現(xiàn)把canvas的知識(shí)點(diǎn)總結(jié)如下，以便隨時(shí)查閱。就跟隨百分網(wǎng)小編一起去了解下吧，想了解更多相關(guān)信息請(qǐng)持續(xù)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!
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(對(duì)接)/round(圓)/square(方)，默認(rèn)情況下是butt;
8、線條相交樣式 lineJoin="miter"; miter(尖角)/round(圓角)/bevel(斜角),默認(rèn)尖角;
9、開始繪制路徑 beginPath();
10、結(jié)束路徑 closePath(); 創(chuàng)建路徑后，如果想繪制一條連接到路徑起點(diǎn)的線條，可以調(diào)用closePath();
11、繪制圓弧 arc(x,y,radius,startAngle,endAngle,true/false);
12、繪制弧線 arcTo(x1,y1,x2,y2,radius) 從上一點(diǎn)開始繪制一天弧線，到x2,y2為止，并且以給定的半徑radius穿過(guò)x1,y1;
13、moveTO(x,y); 將繪圖游標(biāo)移動(dòng)到（x,y）,不畫線
14、lineTo(x,y); 從上一點(diǎn)開始繪制一條直線
15、二次貝塞爾曲線： quadraticCurveTo(cx,cy,x,y); 從上一點(diǎn)開始繪制二次曲線，到x,y為止，cx,cy作為控制點(diǎn)。
16、三次貝塞爾曲線： bezierCurveTo(cx1,cy1,cx2,cy2,x,y); 從上一點(diǎn)開始繪制二次曲線，到x,y為止，cx1,cy1和cx2,cy2作為控制點(diǎn)。
17、rect(x,y,width,height);從點(diǎn)x,y開始繪制矩形，寬度和高度分別由width和height指定。這個(gè)方法繪制的是矩形路徑，而不是獨(dú)立形狀。
18、繪制文本：
(1) 填充文本：fillText("hello",x,y,width);width為可選的最大像素寬度,如果文本大于最大寬度，則文本會(huì)收縮以適應(yīng)最大寬度。
(2) 文本描邊：strokeText("hello",x,y,width);width為可選的最大像素寬度。
(3) 文本樣式：font="bold 14px Arial";
(4) 水平文本對(duì)齊：textAlign='start'; /pic/p>
(5) 垂直文本對(duì)齊：textBaseline='alphabetic'; /pic/p>
(6) 文本的寬度：var text="hello"; var length=context.measureText(text)；參數(shù)text為所需要繪制的文字
19、變換
(1) rotate(angle):圍繞原點(diǎn)旋轉(zhuǎn)圖像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):將坐標(biāo)原點(diǎn)移動(dòng)到x,y，執(zhí)行這個(gè)變換之后，坐標(biāo)0,0會(huì)變成之前由x,y表示的點(diǎn)。也可以使用transform(1,0,0,1,x,y);
(4) transform(<number>, <number>, <number>,<number>,x, y);
(5) setTransform(<number>, <number>, <number>,<number>,x, y);將變換矩陣重置為默認(rèn)狀態(tài)，然后再調(diào)用transform();
20、圖形組合
代碼如下:
context.fillStyle="blue";
context.fillRect(10,10,100,100);
context.globalCompositeOperation='lighter'; 可選值如/* */內(nèi)。
context.fillStyle="red";
context.arc(110,60,50,0,Math.PI*2,false);
context.fill();
/*
source-over(默認(rèn)值)：
destination-over：在原有圖形之下繪制新圖形
source-in：新圖形與原有圖形作in運(yùn)算，只顯示新圖形中與原有圖形相重疊的部分
destination-in：原有圖形與新圖形作in運(yùn)算，只顯示新圖形中與原有圖形相重疊的部分
source-out：新圖形與原有圖形作out運(yùn)算，只顯示新圖形中與原有圖形不重疊的部分
destination-out：新圖形與原有圖形作out運(yùn)算，只顯示新圖形中與原有圖形不重疊的部分
source-atop：只繪制新圖形中與原有圖形重疊的部分和未被重疊的原有圖形
destination-atop：只繪制原有圖形中被新圖形重疊的部分和新圖形的其他部分
lighter：原有圖形與新圖形均繪制，重疊部分做加色處理
xor：只繪制新圖形與原有圖形不重疊的部分，重疊部分變透明
copy：只繪制新圖形
*/
21、繪制圖形陰影
代碼如下:
context.shadowOffsetX=10; /pic/p>
context.shadowOffsetY=10; /pic/p>
context.shadowColor='rgba(100,100,100,0.5)'; /pic/p>
context.shadowBlur=7; /pic/p>
22、繪制、平鋪、裁剪圖像
代碼如下:
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為源圖像的被復(fù)制區(qū)域的起始坐標(biāo)和高度，dx,dy和dw,dh為復(fù)制后的區(qū)域的目標(biāo)坐標(biāo)和高度。
context.createPattern(image,type);圖像平鋪，參數(shù)可以為：no-repeat,repeat-x,repeat-y,repeat;
context.clip(); /pic/p>
例子：
代碼如下:
image=new Image(); /pic/p>
image.src="../images/wukong.gif";
var test=context.createPattern(image,'repeat-y');/pic/p>
context.fillStyle=test;
context.fillRect(0,0,400,400);
image.onload=function() { /pic/p>
drawImg(context,image);
}
function drawImg(context,image){
/pic/p>
context.drawImage(image,10,10,125,125);
/pic/p>
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、保存、恢復(fù)
contex.save();將當(dāng)前狀態(tài)保存到棧中。注意：保存的只是對(duì)繪制圖形的設(shè)置和變換，不會(huì)保存繪制圖形的內(nèi)容。
context.restore();從棧中取出之前保存的圖形狀態(tài)
可以應(yīng)用的場(chǎng)合：
(1)圖像或圖形變形
(2)圖像裁剪
(3)改變圖形上下文時(shí)屬性時(shí)：fillStyle,font,globalAlpha,globalComposite-Operation,lineCap,lineJoin,lineWidth,miterLimit,shadowBlur,shadowColor,
shadowOffsetX,shadowOffsetY,strokeStyle,textAlign,textBaseline
24、線性漸變
代碼如下:
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);
【24個(gè)canvas基礎(chǔ)知識(shí)小結(jié)】相關(guān)文章：
html5的canvas方法使用01-19
HTML5中Canvas的事件處理介紹02-06
HTML5中canvas標(biāo)簽實(shí)現(xiàn)刮刮卡效果10-29
基于html5 canvas實(shí)現(xiàn)漫天飛雪效果的方法01-15
用canvas就可以實(shí)現(xiàn)圖片的濾鏡轉(zhuǎn)化代碼實(shí)現(xiàn)03-05
html5使用canvas畫三角形01-26
考試小結(jié)反思11-06
學(xué)期工作小結(jié)09-21