DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> 24個canvas基礎知識小結
24個canvas基礎知識小結
編輯:HTML5詳解     
這篇文章主要介紹了24個canvas基礎知識小結,非常全面詳盡,推薦給大家。

現把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(<number>, <number>, <number>,<number>,x, y);
  (5) setTransform(<number>, <number>, <number>,<number>,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.shadowOffsetX=10; //陰影的橫向位移量
context.shadowOffsetY=10; //陰影的縱向位移量
context.shadowColor='rgba(100,100,100,0.5)'; //陰影的顏色
context.shadowBlur=7; //陰影的模糊范圍

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為源圖像的被復制區域的起始坐標和高度,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);
}

23、保存、恢復

contex.save();將當前狀態保存到棧中。注意:保存的只是對繪制圖形的設置和變換,不會保存繪制圖形的內容。
context.restore();從棧中取出之前保存的圖形狀態
可以應用的場合:
(1)圖像或圖形變形
(2)圖像裁剪
(3)改變圖形上下文時屬性時: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);
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved