碼上歡樂
相關內容    簡體    繁體

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

本文轉載自   查看原文   2016-05-29 16:50   37731    html css JavaScript

 

一、對 canvas 的理解

　　<canvas>標簽是 HTML5 中的新標簽，像所有的 dom 對象一樣它有自己本身的屬性、方法和事件。

　　canvas 是用來在網頁上繪制圖形的（我們通常稱之為畫布），canvas 只是圖形容器，需要使用 js 腳本來繪制圖形，可以繪制線條、矩形、多邊形、圓形、圓環、組合圖形、文字、自定義圖像等。

　　瀏覽器支持

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

二、基本方法

繪圖環境：

　　語法 Canvas.getContext(contextID)

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

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

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

繪制圖形樣式style（一般在繪制圖形前先進行樣式設定）：

  • 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,透明度)

三、使用 <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軸坐標, 寬度, 高度);

四、實例

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

【注】：

  1. 　三角形有三個點，但在連線的時候還需要連回頂點；
  2. 　最后一定記得加上 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         }

【注】：

  1. 起點☞指的是矩形左上角的頂點
  2. 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();

 無邊框線實例結果：

【注】：

    1、系統默認在繪制第一個路徑的開始點為beginPath

    2、如果畫完前面的路徑沒有重新指定beginPath，那么畫第其他路徑的時候會將前面最近指定的beginPath后的全部路徑重新繪制

    3、每次調用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)

  1. context.translate(x,y) 等同於 context.transform (1,0,0,1,x,y)或context.transform(0,1,1,0.x,y)
  2. context.scale(x,y) 等同於 context.transform(x,0,0,y,0,0)或context.transform (0,y,x,0, 0,0);
  3. 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

 結果顯示：

 

 

 

 

 

 

 五、后續補充

　　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 對象）放回畫布上

合成

屬性 描述
globalAlpha 設置或返回繪圖的當前 alpha 或透明值
globalCompositeOperation 設置或返回新圖像如何繪制到已有的圖像上

其他

方法 描述
save() 保存當前環境的狀態
restore() 返回之前保存過的路徑狀態和屬性
createEvent()  
getContext()  
toDataURL()  

 學習資源：http://www.w3school.com.cn/html5/html_5_canvas.asp   http://blog.csdn.net/clh604/article/details/8536059   http://www.jb51.net/html5/70307.html


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Android百度地圖之自定義繪制點、線、圓、多邊形實現 Tkinter canvas-繪制線、矩形、文字、橢圓、圓、多邊形 Android利用canvas畫各種圖形(點、直線、弧、圓、橢圓、文字、矩形、多邊形、曲線、圓角矩形) Unity 繪制多邊形 GPS經緯度判斷是否在圓、多邊形、矩形內 .net圖表之ECharts隨筆07-自定義系列(多邊形) mysql 空間查詢 自定義多邊形內的點 MBRContains and ST_Within opengl基礎學習專題 (三) 多邊形繪制的幾種樣式 C++實現glut繪制點、直線、多邊形、圓 python-opencv-圓、橢圓與任意多邊形的繪制
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM