HTML5 Canvas 學習筆記（canvas繪製線條、矩形、多邊形、圓、自定義圖像）

時間 2019-11-14

標籤 html5 html canvas 學習筆記繪製線條矩形多邊形自定義圖像欄目 HTML5 简体版

原文原文鏈接

1、對 canvas 的理解

　　<canvas>標籤是 HTML5 中的新標籤，像全部的 dom 對象同樣它有本身自己的屬性、方法和事件。javascript

　　canvas 是用來在網頁上繪製圖形的（咱們一般稱之爲畫布），canvas 只是圖形容器，須要使用 js 腳原本繪製圖形，能夠繪製線條、矩形、多邊形、圓形、圓環、組合圖形、文字、自定義圖像等。html

　　瀏覽器支持

註釋：Internet Explorer 8 以及更早的版本不支持 <canvas> 標籤。Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <canvas> 標籤。html5

2、基本方法

繪圖環境：java

　　語法 Canvas.getContext(contextID)canvas

　　參數 contextID 指定了您想要在畫布上繪製的類型。當前惟一的合法值是 "2d"，它指定了二維繪圖，而且致使這個方法返回一個環境對象，該對象導出一個二維繪圖 API。瀏覽器

　　【注】：getContext() 方法返回一個用於在畫布上繪圖的環境。app

　　　　　　getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。dom

繪製圖形樣式style（通常在繪製圖形前先進行樣式設定）：ide

context.fillStyle //填充樣式
context.strokeStyle //筆觸顏色
context.lineWidth //邊框寬度

繪製圖像有兩種方法：學習

context.fill() //填充
context.stroke() //繪製邊框

顏色的表示方式:

顏色名稱:"red" "green" "blue"

十六進制顏色值: "#FFFFFF"

三色值：rgb(1-255,1-255,1-255)

四色值：rgba(1-255,1-255,1-255,透明度)

3、使用 <canvas>

　　Step1: 首先在html頁面中添加<canvas>標籤，規定好畫布的id和尺寸，代碼以下：

<!--規定了canvas元素的id名稱爲canvas、寬度爲400px、高度爲300px--> 

<canvas id="myCanvas" width="400" height="300"/>

　　Step2: 經過JavaScript來進行繪製：

　　　　方法一：

<!--用谷歌瀏覽器，獲取canvas對象時須要先加載對象，因此要把該段代碼放到body中，在js文件裏進行繪製圖像--> 
<script src="canvas.js"></script>

　　　　方法二：

<!--或者直接在body裏編寫代碼--> 
<script type="text/javascript"> 　　
    var canvas = document.getElementById("myCanvas"); 　　
    var context = canvas.getContext("2d"); 　
    context.fillStyle = "#FF0000"; 　
    context.fillRect(50,50,150,100); 
</script>

　　圖解：

　　Step3: Step2 分步驟：

- 　　經過id來捕獲canvas元素
- 　　建立 context 對象
- 　　指定 fillStyle 填充顏色爲紅色指定 fillRect ：fillRect(起始點x軸座標, 始點y軸座標, 寬度, 高度);

4、實例

1--繪製線條：

　　context.moveTo(x,y)

　　context.lineTo(x,y)

x:x座標
y:y座標
起點 moveTo 的點到終點 lineTo 的點之間畫一條直線
若是沒有moveTo那麼第一次lineTo的效果和moveTo同樣
每次lineTo後若是沒有moveTo，那麼下次lineTo的開始點爲前一次lineTo的結束點

 1  1 // 繪製對角線
 2  2 function demo1(id){
 3  3     var canvas = document.getElementById(id);
 4  4     var context = canvas.getContext("2d");
 5  5         　　    
 6  6     context.strokeStyle = "#ff0000";          
 7  7   
 8  8     context.moveTo(0,0);
 9  9     context.lineTo(200,100);
10 10     context.stroke();            
11 11 }

View Code

實例結果：

 1 // 繪製直角三角形
 2         function demo1(id){
 3              var canvas = document.getElementById(id);
 4 　　　　　　　　var context = canvas.getContext("2d");
 5         　　    
 6              context.strokeStyle = "#ff0000";
 7 
 8              context.lineTo(20, 20);
 9              context.lineTo(20, 70);
10              context.lineTo(70, 70);
11              context.lineTo(20, 20);
12              context.stroke();
13         }

View Code

【注】：

　三角形有三個點，但在連線的時候還須要連回頂點；
　最後必定記得加上 stroke(); 初學時容易犯這個毛病，這至關於你把點定好了，卻沒用線連起來，豈不......

實例結果：

CSS屬性中有一圓角設置 radius，canvas畫線段也要達到這種圓角匾額效果，我麼也有相應的辦法：

　　lineJoin 屬性,能夠設置線的交匯處的樣式，lineJoin有3個屬性值：miter(尖角，默認)，bevel（斜角）,round（圓角）
　　lineCap 屬性，定義線條的端點。lineCap有3個屬性值：butt（平，默認）,round（圓）,square（方）
區別只是平頭沒有伸出去那麼一截。圓頭和方頭都會伸出去一截，這一節是多長呢？就是線條寬度的一半。借用一張圖說明：

 1 // 圓角 連線
 2 function demo1(id){
 3                         
 4              var canvas = document.getElementById(id);
 5         　　  var context = canvas.getContext("2d");
 6                         
 7              context.beginPath();
 8              context.moveTo(100,8);
 9              context.lineTo(180,8);
10              context.closePath();
11              context.lineWidth = 8; 
12              context.strokeStyle = "#00ff00";
13              context.lineJoin = "round";
14              context.stroke();   
15 
16              context.beginPath();
17              context.moveTo(100,20);
18             context.lineTo(100,80); 
19             context.lineTo(180,80); 
20             context.lineTo(180,20); 
21             context.lineTo(100,20); 
22             context.closePath();//閉合路徑 
23             context.lineWidth = 10; 
24             context.strokeStyle = 'rgba(0,255,0,0.5)'; 
25             context.lineJoin = "round";
26             context.stroke();   
27 }

View Code

實例結果：

2--繪製矩形：

　　context.fillRect(x,y,width,height)

　　strokeRect(x,y,width,height)

x:矩形起點橫座標
y:矩形起點縱座標
width:矩形的寬度
height:矩形的高度

 1 //        矩形
 2         function demo2(id){
 3              var canvas = document.getElementById(id);
 4         　　    var context = canvas.getContext("2d");
 5         　　    
 6             // 1排1----默認填充爲黑色 fillStyle = "#000"
 7             context.fillRect(20, 20, 60, 60);
 8             // 1排2----默認邊框爲黑色 strokeStyle = "#000"    
 9             context.strokeRect(100, 20, 60, 60);
10             
11             // 2排----自定義填充色和邊框顏色
12             context.fillStyle = "#0000ff";
13             context.strokeStyle = "#ff0000";
14             
15             context.fillRect(20, 100, 60, 60);    //藍色填充矩形
16             
17             context.strokeRect(100, 100, 60, 60);    //紅色邊框矩形
18             
19             context.lineWidth = 10;        //設置邊框線框
20             context.strokeRect(180, 100, 60, 60);    //加粗邊框矩形
21             
22             // 3排----清除20*20的矩形區域
23             context.fillStyle = "#00ff00";
24             
25             context.fillRect(20, 180, 60, 60);
26             context.clearRect(30, 190, 20, 20);        
27             
28             // 4排----給矩形添加透明度
29             context.fillStyle = "rgba(0,255,0,0.2)";
30             context.strokeStyle = "rgba(0,255,0,0.2)";
31             
32             context.fillRect(20, 260, 60, 60);        //變淺的紅色填充矩形
33             
34             context.lineWidth = 10;        //設置邊框線框，0.2的透明度不易觀察
35             context.strokeRect(100, 260, 60, 60);    //變淺的紅色邊框矩形
36         }

【注】：

起點☞指的是矩形左上角的頂點
rgba(0, 255, 0, 0.2) 前三個參數爲紅綠藍三色，最後一個參數是透明度參數，參數值範圍0~1，接近於0越透明

實例結果：

3--繪製圓：

　　建立圓形方法定義：xxx.arc(x,y,radius,startAngle,endAngle,anticlockwise)

x :圓的中心的 x 座標
y :圓的中心的 y 座標
r :圓的半徑
sAngle :起始角，以弧度計（弧的圓形的三點鐘位置是 0 度）
eAngle :結束角，以弧度計
counterclockwise :可選。規定應該逆時針仍是順時針繪圖。False 爲順時針，true 爲逆時針

 1 //        圓形
 2         function demo3(id){
 3              var canvas = document.getElementById(id);
 4         　　    var context = canvas.getContext("2d");
 5         　　    
 6             context.strokeStyle = "00FF00";
 7 
 8             context.beginPath();
 9             context.arc(50, 50, 30, 0, 2*Math.PI, true);
10             context.stroke();
11         }

View Code

【注】：2*Math.PI 就是2∏

實例結果：

 1 //      填充圓形
 2         function demo3(id){
 3              var canvas = document.getElementById(id);
 4         　　    var context = canvas.getContext("2d");
 5             
 6             context.fillStyle = "#0000ff";
 7             context.strokeStyle = "#ff0000";
 8 
 9             context.beginPath();
10             context.arc(50, 50, 30, 0, 2*Math.PI, true);
11             context.closePath();
12             context.stroke();
13             context.fill();
14         }

View Code

實例結果：

 1 //        同心圓
 2         function demo3(id){
 3              var canvas = document.getElementById(id);
 4         　　    var context = canvas.getContext("2d");
 5             //外圓
 6             context.fillStyle = "#0000ff";
 7             context.strokeStyle = "#ff0000";
 8             context.beginPath();
 9             context.arc(50, 50, 40, 0, 2*Math.PI, true);
10             context.closePath();
11             context.stroke();
12             context.fill();
13             //內圓
14             context.fillStyle = "pink";
15             context.beginPath();
16             context.arc(50, 50, 20, 0, 2*Math.PI, true);
17             context.closePath();
18             context.fill();
19         }

View Code

實例結果：

4--繪製路徑：

　　context.beginPath()

　　context.closePath()

　　context.arc(x,y,radius,startAngle,endAngle,anticlockwise)

圓的角度 2*Math.PI，1/4角度就是Math.PI/4

 1 //        路徑
 2         function demo4(id){
 3              var canvas = document.getElementById(id);
 4         　　    var context = canvas.getContext("2d");
 5         　　    // 填充
 6             context.beginPath();
 7             context.arc(20, 20, 50, 0, Math.PI/2 , false);
 8             context.closePath();
 9             context.fillStyle = '#0000ff';
10             context.fill();
11             // 邊框
12             context.beginPath();
13             context.arc(100, 20, 50, 0, Math.PI/2 , false);
14             context.strokeStyle = '#0000ff'
15             context.closePath();
16             context.stroke();
17             // 填充+邊框
18             context.beginPath();
19             context.arc(180, 20, 50, 0, Math.PI/2 , false);
20             context.strokeStyle = '#0000ff';
21             context.closePath();
22             context.stroke();
23             context.fillStyle = 'rgba(0,0,255,0.2)';
24             context.fill();
25         }

View Code

有邊框線實例結果：

// 沒有 beginPath(); closePath();
            context.arc(100, 100, 50, 0, Math.PI/2 , false);
            context.arc(200, 200, 50, 0, Math.PI/2 , false);
            context.fillStyle = 'rgba(0,0,255,0.2)';
            context.fill();

無邊框線實例結果：

【注】：

一、系統默認在繪製第一個路徑的開始點爲beginPath

二、若是畫完前面的路徑沒有從新指定beginPath，那麼畫第其餘路徑的時候會將前面最近指定的beginPath後的所有路徑從新繪製

三、每次調用context.fill（）的時候會自動把當次繪製的路徑的開始點和結束點相連，接着填充封閉的部分

ps：書本的結論是若是沒有closePath那麼前面的路勁會保留，實驗證實正確的結論是若是沒有從新beginPath那麼前面的路勁會保留

ps1：若是你真心凌亂了，那麼記住每次畫路徑都在先後加context.beginPath() 和context.closePath()就行

5--繪製曲線：

　　繪製貝塞爾曲線 context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

cp1x:第一個控制點x座標
cp1y:第一個控制點y座標
cp2x:第二個控制點x座標
cp2y:第二個控制點y座標
x:終點x座標
y:終點y座標

　　繪製二次樣條曲線 context.quadraticCurveTo(qcpx,qcpy,qx,qy)

qcpx:二次樣條曲線控制點x座標
qcpy:二次樣條曲線控制點y座標
qx:二次樣條曲線終點x座標
qy:二次樣條曲線終點y座標

1 var canvas = document.getElementById(id);
2         　　    var context = canvas.getContext("2d");
3         　　    // 貝塞爾曲線
4             context.moveTo(50, 50);
5             context.lineWidth = 10;
6             context.strokeStyle = "aquamarine";
7             context.bezierCurveTo(50, 50, 500 , 50, 150, 150);
8             context.stroke();

View Code

實例結果：

 1 function demo5(id){
 2             var canvas = document.getElementById(id);
 3         　　    var context = canvas.getContext("2d");
 4         　　    // 曲線組合
 5             context.moveTo(50, 50);
 6             context.bezierCurveTo(50, 50,150, 50, 150, 150);
 7             context.stroke();
 8             context.quadraticCurveTo(150, 250, 250, 250);
 9             context.stroke();
10             
11         }

View Code

實例結果：

6--繪製漸變效果：

　　1. 線性漸變 var grd = context.createLinearGradient(xStart,yStart,xEnd,yEnd)

　　　　線性漸變顏色 context.addColorStop(offset,color)

　 xstart: 漸變開始點x座標
ystart: 漸變開始點y座標
xEnd: 漸變結束點x座標
yEnd: 漸變結束點y座標

offset: 設定的顏色離漸變結束點的偏移量(0~1)
color: 漸變顏色

//   對角線性漸變

 1 //      對角線性漸變
 2         function demo6(id){
 3             var canvas = document.getElementById(id);
 4         　　 var context = canvas.getContext("2d");
 5         
 6             var grd = context.createLinearGradient(0,0,300,200);
 7             grd.addColorStop(0,"#ff0000");
 8             grd.addColorStop(1,"#0000ff");
 9             context.fillStyle = grd;
10             context.fillRect(0,0,300,200);
11         }

View Code

//　　橫向線型多色漸變

 1 //橫向線型多色漸變
 2              var grd = context.createLinearGradient(0,0,300,0);
 3               grd.addColorStop(0,"#ff0000");
 4               grd.addColorStop(0.2,"#ff00ff");
 5               grd.addColorStop(0.4,"#ffff00");
 6               grd.addColorStop(0.6,"#00ffff");
 7               grd.addColorStop(0.8,'pink');
 8               grd.addColorStop(1,"#0000ff");
 9               context.fillStyle = grd;
10              context.fillRect(0,0,300,200);

View Code

結果顯示：

　　2. 徑向（發散）漸變 var grd = context.createLinearGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)

xStart: 發散開始圓心x座標
yStart: 發散開始圓心y座標
radiusStart: 發散開始圓的半徑
xEnd: 發散結束圓心的x座標
yEnd: 發散結束圓心的y座標
radiusEnd: 發散結束圓的半徑

//　　徑向漸變

1  //徑向漸變
2              var grd = context.createRadialGradient(150, 100, 0, 150, 100, 100);
3              grd.addColorStop(0, 'rgb(100,200,100)');  
4              grd.addColorStop(1, 'rgb(50,100,10)');
5              context.fillStyle = grd;
6              context.beginPath();
7              context.arc(150, 100, 100, 0, Math.PI * 2, true);
8              context.closePath();
9              context.fill();

View Code

//　　紅太陽

1 //徑向漸變  不一樣圓心
2             var grd = context.createRadialGradient(180, 70, 00, 180, 70, 150);
3             grd.addColorStop(0, 'rgb(255,80,0)');  
4             grd.addColorStop(1, 'rgb(255,200,10)');
5             context.fillStyle = grd;
6             context.beginPath();
7             context.arc(150, 100, 100, 0, Math.PI * 2, true);
8             context.closePath();
9             context.fill();

View Code

//　　矩形漸變

1 var grd = context.createRadialGradient(150, 150, 0, 300, 300, 150);
2             grd.addColorStop(0.1, 'rgb(255,80,0)');
3             grd.addColorStop(0.8, 'rgb(255,200,10)');
4             grd.addColorStop(1, 'rgb(255,255,0)');
5             context.fillStyle = grd;
6             context.fillRect(150, 150, 300, 300);

View Code

//　　三角形漸變

1 var grd = context.createRadialGradient(0, 150, 100, 300, 150, 50);
2             grd.addColorStop(0,"#ff0000");
3             grd.addColorStop(0.2,"#ff00ff");
4             grd.addColorStop(0.4,"#ffff00");
5             grd.addColorStop(0.6,"#00ffff");
6             grd.addColorStop(0.8,'pink');
7             grd.addColorStop(1,"#0000ff");
8             context.fillStyle = grd;
9             context.fillRect(0,0, 300, 300);

View Code

結果顯示：

7--繪製陰影：

context.shadowOffsetX : 陰影的橫向位移量（默認值爲0）
context.shadowOffsetY : 陰影的縱向位移量（默認值爲0）
context.shadowColor : 陰影的顏色
context.shadowBlur : 陰影的模糊範圍（值越大越模糊）

 1 //        陰影
 2         function demo10(id){
 3             var canvas = document.getElementById(id);
 4             var context = canvas.getContext("2d");
 5             //陰影
 6             context.shadowOffsetX = 8;
 7             context.shadowOffsetY = 8;
 8             context.shadowColor = "#ccc";
 9             context.fillStyle = "#ffcc00";
10             context.fillRect(10,10,60,60);
11             //陰影模糊
12             context.shadowOffsetX = 8;
13             context.shadowOffsetY = 8;
14             context.shadowColor = "#ccc";
15             context.shadowBlur = 6;
16             context.fillStyle = "#ffcc00";
17             context.fillRect(100,10,60,60);
18         
19         }

View Code

結果顯示：

8--繪製文字：

設置字體樣式：context.font　　

水平對齊方式：context.textAlign　　（屬性值有 start、end、right、center）

垂直對齊方式：context.textBaseline　　（屬性值有 top、hanging、middle、alphabetic、ideographic、bottom）

計算字體長度(px)：var length = context.measureText(text)　　（只能計算長度，不能計算高度）

填充文字：context.fillText(text,x,y)

繪製文字輪廓 context.strokeText(text,x,y)

text: 文字內容
x: 文字起點的x軸座標
y: 文字起點的y軸座標

 1 //    文字
 2         function demo12(id){
 3             var canvas = document.getElementById(id);
 4             var context = canvas.getContext("2d");
 5             
 6             context.fillStyle = "#ffcc00";
 7             context.fillRect(0,0,700,100);
 8             context.fillStyle = "#ff0000";
 9             context.strokeStyle = "green";
10         //1
11             context.font = "20px sans-serif";
12             context.textAlign = "start";
13             context.textBaseline = "top";
14             //填充字符串
15             var txt = "1 HTML5 CANVAS";
16             context.fillText(txt, 0, 0);
17             var length = context.measureText( txt );
18             context.fillText("長爲" + length.width + "px", 0, 30);
19         //2
20             context.font = "italic 20px sans-serif";
21             context.textAlign = "start";
22             context.textBaseline = "top";
23             var txt = "2 HTML5 CANVAS";
24             context.fillText(txt, 180, 0);
25             var length = context.measureText( txt );
26             context.fillText("長爲" + length.width + "px", 180, 30);
27         //3    
28             context.font = "bold 20px sans-serif";
29             context.textAlign = "start";
30             context.textBaseline = "top";
31             var txt = "3 HTML5 CANVAS";
32             context.fillText(txt, 360, 0);
33             length = context.measureText( txt );
34             context.fillText("長爲" + length.width + "px", 360, 30);
35         //4    
36             context.font = "bold 20px sans-serif";
37             context.textAlign = "start";
38             context.textBaseline = "top";
39             var txt = "3 HTML5 CANVAS";
40             context.strokeText(txt, 540, 0);
41             length = context.measureText( txt );
42             context.strokeText("長爲" + length.width + "px", 540, 30);
43         }

View Code

結果顯示：

9--繪製圖像：

1.繪圖：context.drawImage

context.drawImage(image,x,y)

image:Image對象var img=new Image(); img.src="url(...)";
x: 圖像左上頂點的x座標
y: 圖像左上頂點的y座標

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

image:Image對象var img=new Image(); img.src="url(...)";
x: 圖像左上頂點的x座標
y: 圖像左上頂點的y座標
w: 繪製圖像的寬度
h: 繪製圖像的高度

context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):選取圖像的一部分矩形區域進行繪製

image:Image對象var img=new Image(); img.src="url(...)";
sx：圖像上的x座標
sy：圖像上的y座標
sw：矩形區域的寬度
sh：矩形區域的高度
dx：畫在canvas的x座標
dy：畫在canvas的y座標
dw：畫出來的寬度
dh：畫出來的高度

 1 //        圖像
 2         function demo11(id){
 3             var canvas = document.getElementById(id);
 4             var context = canvas.getContext("2d");
 5             //載入圖像drawImage(image,x,y)
 6             
 7             context.fillStyle = '#ffcc00';
 8             context.fillRect(0,0,1000,200);
 9             
10             var image = new Image();
11             image.src = "img/img.jpg";
12             image.onload=function(){
13                 //drawImage(image,x,y)
14                 context.drawImage(image,0,0);
15                 context.drawImage(image,220,20);
16                 //drawImage(image,x,y,w,h)
17                 context.drawImage(image,440,20,100,75);
18                 //drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
19                 context.drawImage(image,30,30,150,120,660,20,100,80);
20                 
21             }
22         }

View Code

結果顯示：

2.圖像平鋪：context.createPattern(image,type)

type:
no-repeat: 不平鋪　　 repeat-x: 橫方向平鋪　　 repeat-y: 縱方向平鋪　　 repeat: 全方向平鋪

 1 //圖像平鋪
 2         function demo111(id){
 3             var canvas = document.getElementById(id);
 4             var context = canvas.getContext("2d");
 5 
 6             var image = new Image();
 7             image.src = "img/text.jpg";
 8 
 9             image.onload = function () {
10                 
11                     var ptrn = context.createPattern(image, "repeat");
12                     context.fillStyle = ptrn;
13                     context.fillRect(0, 0, 400, 100);
14      
15             };
16         }

View Code

結果顯示：

3.圖像裁剪：context.clip()

context.clip()只繪製封閉路徑區域內的圖像，不繪製路徑外部圖像，用的時候1 先建立裁剪區域，2 再繪製圖像（以後繪製的圖形都會採用這個裁剪區域，要取消這個裁剪區域就須要用到保存恢復狀態）

結果顯示：

4.像素處理：var imagedata=context.getImageData(sx,sy,sw,sh)

結果顯示：

10--canvas 變形：

1. 平移　　context.translate(x,y)

x:座標原點向x軸方向平移x
y:座標原點向y軸方向平移y

2. 縮放　　context.scale(x,y)

x:x座標軸按x比例縮放
y:y座標軸按y比例縮放

3. 旋轉　　context.rotate(angle)

angle:座標軸旋轉x角度（角度變化模型和畫圓的模型同樣）

 1 //        變形
 2         function demo7(id){
 3             var canvas = document.getElementById(id);
 4             var context = canvas.getContext("2d");
 5 
 6             context.fillStyle = "#eecc33";
 7             //平移1 縮放2 旋轉3      
 8             context.translate(150, 10);
 9             context.scale(0.5, 0.5);
10             context.rotate(Math.PI / 3);
11             context.fillRect(0, 0, 200, 200);

View Code

結果顯示：

 1 function draw5(id) {
 2             var canvas = document.getElementById(id);
 3             if (canvas == null)
 4                 return false;
 5 
 6 
 7             var context = canvas.getContext("2d");
 8             context.save(); //保存了當前context的狀態
 9             context.fillStyle = "#EEEEFF";
10             context.fillRect(0, 0, 400, 300);
11 
12             context.fillStyle = "rgba(255,0,0,0.1)";
13             //平移 縮放 旋轉  1 2 3        
14             context.translate(100, 100);
15             context.scale(0.5, 0.5);
16             context.rotate(Math.PI / 4);
17             context.fillRect(0, 0, 100, 100);
18 
19 
20             context.restore(); //恢復到剛剛保存的狀態,保存恢復只能使用一次
21             context.save(); //保存了當前context的狀態
22             context.fillStyle = "rgba(255,0,0,0.2)";
23             //平移 旋轉 縮放 1 3 2
24             context.translate(100, 100);
25             context.rotate(Math.PI / 4);
26             context.scale(0.5, 0.5);
27             context.fillRect(0, 0, 100, 100);
28 
29             context.restore(); //恢復到剛剛保存的狀態
30             context.save(); //保存了當前context的狀態
31             context.fillStyle = "rgba(255,0,0,0.3)";
32             //縮放 平移 旋轉 2 1 3 
33             context.scale(0.5, 0.5);
34             context.translate(100, 100);
35             context.rotate(Math.PI / 4);
36             context.fillRect(0, 0, 100, 100);
37 
38             context.restore(); //恢復到剛剛保存的狀態
39             context.save(); //保存了當前context的狀態
40             context.fillStyle = "rgba(255,0,0,0.4)";
41             //縮放 旋轉 平移  2 3  1 
42             context.scale(0.5, 0.5);
43             context.rotate(Math.PI / 4);
44             context.translate(100, 100);
45             context.fillRect(0, 0, 100, 100);
46 
47             context.restore(); //恢復到剛剛保存的狀態
48             context.save(); //保存了當前context的狀態
49             context.fillStyle = "rgba(255,0,0,0.5)";
50             //旋轉 平移 縮放  3 1 2 
51             context.rotate(Math.PI / 4);
52             context.translate(100, 100);
53             context.scale(0.5, 0.5);
54             context.fillRect(0, 0, 100, 100);
55 
56             context.restore(); //恢復到剛剛保存的狀態
57             context.save(); //保存了當前context的狀態
58             context.fillStyle = "rgba(255,0,0,1)";
59             //旋轉 縮放 平移   3 2 1 
60             context.rotate(Math.PI / 4);
61             context.scale(0.5, 0.5);
62             context.translate(100, 100);
63             context.fillRect(0, 0, 100, 100);
64 
65             //實驗代表應該移動的是座標軸
66             //實驗代表縮放的是座標軸比例
67             //實驗代表旋轉的是座標軸
68             //綜合上述，所以平移 縮放 旋轉 三者的順序不一樣都將畫出不一樣的結果
69         }

View Code

11--矩陣變換：　　context.transform(m11,m12,m21,m22,dx,dy)

context.translate(x,y) 等同於 context.transform (1,0,0,1,x,y)或context.transform(0,1,1,0.x,y)
context.scale(x,y) 等同於 context.transform(x,0,0,y,0,0)或context.transform (0,y,x,0, 0,0);
context.rotate(θ) 等同於

　　　　context.transform(Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180),

　　　　Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180),0,0）

　　或

　　　　context.transform(-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180),

　　　　Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180), 0,0)

12--圖形組合：　　context.globalCompositeOperation=type

　　type 值：

source-over（默認值）: 在原有圖形上繪製新圖形
destination-over : 在原有圖形下繪製新圖形
source-in : 顯示原有圖形和新圖形的交集，新圖形在上，因此顏色爲新圖形的顏色
destination-in : 顯示原有圖形和新圖形的交集，原有圖形在上，因此顏色爲原有圖形的顏色
source-out : 只顯示新圖形非交集部分
destination-out : 只顯示原有圖形非交集部分
source-atop : 顯示原有圖形和交集部分，新圖形在上，因此交集部分的顏色爲新圖形的顏色
destination-atop : 顯示新圖形和交集部分，新圖形在下，因此交集部分的顏色爲原有圖形的顏色
lighter : 原有圖形和新圖形都顯示，交集部分作顏色疊加
xor : 重疊飛部分不現實
copy : 只顯示新圖形

 1 var canvas = document.getElementById(id);
 2             var context = canvas.getContext("2d");
 3 
 4                //藍色矩形
 5                context.fillStyle = "blue";
 6                context.fillRect(10, 10, 60, 60);
 7                //設置組合方式 source-over（默認值）
 8 //             context.globalCompositeOperation = source-over;
 9                //紅色圓形
10                context.beginPath();
11                context.fillStyle = "red";
12                context.arc(60, 60, 30, 0, 2*Math.PI , true);
13                context.closePath();
14                context.fill();

結果顯示：

動態切換各類組合實例：

 1 //        圖形組合
 2         function demo9(id){
 3             var canvas = document.getElementById(id);
 4             var context = canvas.getContext("2d");
 5 
 6             var oprtns = new Array(
 7             "source-over",
 8             "destination-over",
 9             "source-in",
10             "destination-in",
11             "source-out",
12             "destination-out",
13             "source-atop",
14             "destination-atop",
15             "lighter",
16             "xor",         
17             "copy"
18             );
19            var i = 0;//組合效果編號
20       
21            //結合setinterval動態顯示組合
22            var interal = setInterval(function () {
23                if (i == 10) {
24                    i=0;
25                }
26                else {
27                    i++;
28                }
29                //藍色矩形
30                context.fillStyle = "blue";
31                context.fillRect(10, 10, 60, 60);
32                //設置組合方式 
33                context.globalCompositeOperation = oprtns[i];
34                //設置新圖形（紅色圓形）
35                context.beginPath();
36                context.fillStyle = "red";
37                context.arc(60, 60, 30, 0, Math.PI * 2, false);
38                context.fill();
39           }, 2000);
40         }

View Code

結果顯示：

5、後續補充

　　canvas 還有不少屬性方法,有興趣的猴子們繼續加油！！！ 轉載帶我飛飛飛！！！

顏色、樣式和陰影

屬性	描述
fillStyle	設置或返回用於填充繪畫的顏色、漸變或模式
strokeStyle	設置或返回用於筆觸的顏色、漸變或模式
shadowColor	設置或返回用於陰影的顏色
shadowBlur	設置或返回用於陰影的模糊級別
shadowOffsetX	設置或返回陰影距形狀的水平距離
shadowOffsetY	設置或返回陰影距形狀的垂直距離

方法	描述
createLinearGradient()	建立線性漸變（用在畫布內容上）
createPattern()	在指定的方向上重複指定的元素
createRadialGradient()	建立放射狀/環形的漸變（用在畫布內容上）
addColorStop()	規定漸變對象中的顏色和中止位置

線條樣式

屬性	描述
lineCap	設置或返回線條的結束端點樣式
lineJoin	設置或返回兩條線相交時，所建立的拐角類型
lineWidth	設置或返回當前的線條寬度
miterLimit	設置或返回最大斜接長度

矩形

方法	描述
rect()	建立矩形
fillRect()	繪製「被填充」的矩形
strokeRect()	繪製矩形（無填充）
clearRect()	在給定的矩形內清除指定的像素

徑路

方法	描述
fill()	填充當前繪圖（路徑）
stroke()	繪製已定義的路徑
beginPath()	起始一條路徑，或重置當前路徑
moveTo()	把路徑移動到畫布中的指定點，不建立線條
closePath()	建立從當前點回到起始點的路徑
lineTo()	添加一個新點，而後在畫布中建立從該點到最後指定點的線條
clip()	從原始畫布剪切任意形狀和尺寸的區域
quadraticCurveTo()	建立二次貝塞爾曲線
bezierCurveTo()	建立三次方貝塞爾曲線
arc()	建立弧/曲線（用於建立圓形或部分圓）
arcTo()	建立兩切線之間的弧/曲線
isPointInPath()	若是指定的點位於當前路徑中，則返回 true，不然返回 false

轉換

方法	描述
scale()	縮放當前繪圖至更大或更小
rotate()	旋轉當前繪圖
translate()	從新映射畫布上的 (0,0) 位置
transform()	替換繪圖的當前轉換矩陣
setTransform()	將當前轉換重置爲單位矩陣。而後運行 transform()

文本

屬性	描述
font	設置或返回文本內容的當前字體屬性
textAlign	設置或返回文本內容的當前對齊方式
textBaseline	設置或返回在繪製文本時使用的當前文本基線

方法	描述
fillText()	在畫布上繪製「被填充的」文本
strokeText()	在畫布上繪製文本（無填充）
measureText()	返回包含指定文本寬度的對象

圖像繪製

方法	描述
drawImage()	向畫布上繪製圖像、畫布或視頻

像素操做

屬性	描述
width	返回 ImageData 對象的寬度
height	返回 ImageData 對象的高度
data	返回一個對象，其包含指定的 ImageData 對象的圖像數據

方法	描述
createImageData()	建立新的、空白的 ImageData 對象
getImageData()	返回 ImageData 對象，該對象爲畫布上指定的矩形複製像素數據
putImageData()	把圖像數據（從指定的 ImageData 對象）放回畫布上