一波HTML5 Canvas基礎繪圖實例程式碼集合_html5教學技巧

基本繪製

XML/HTML Code複製內容到剪貼簿

1. var canvas = document.getElementBy>document
.getElementBy; >
2. if (canvas.getContext) {   
3.     var context = canvas.Congetn('2d');
4.     // 線寬   
5.     context.lineWidth = 4; 🎜>
    // 畫筆顏色   
    
7. context.strokeStyle = 'red';     // 填充色   
8.     
context.fillStyle
9.  = "red";     // 帽型   
    
10. context.lineCap
 = 
11. 'butt';     // 開始路徑        context.beginPath();   
12.     // 起點   
13.     context.moveTo(10,10);   
14.     // 終點   
15.     context.lineTo(150,50);   
16.     // 繪製   
17.     context.stroke();   
18. ｝  
    
20. 長方形

XML/HTML Code
複製內容到剪貼簿

var canvas

 = 

1. document.getElementBy>document.getElementBy; > if (canvas.getContext) {        context.beginPath();   
2.     context.strokeRect(10,10,70,40);   
3.     // 矩形的另一種方式   
4.     context.rect(10,10.70,40);   
5.     context.stroke();   
6.         
7.     // 實心長方形   
8.     context.beginPath();   
9.     context.fillRect(10,10,70,40);   
10.     // 另一種方式實心長方形   
11.     context.beginPath();   
12.     context.rect(10,10,70,40);   
13.     context.fill();   
14. ｝  
16.       圓形

XML/HTML Code
複製內容到剪貼簿

1. var canvas = document.getElementBy>document
.getElementBy; >
2. if (canvas.getContext) {   
3.     context.beginPath();   
4.     // 圓中心座標x, 圓中心座標Y, 圓弧半徑， 起始角度，終止角度，是否逆時針   
5.     // 第4個參數和第五個參數是要傳入的弧度，如果畫30角度，需要將其轉化為弧度 30 * Math.PI / 180   
6.     context.arc(100,100,70,0,130 * Math.PI / 180, true);   
7.     context.stroke();   
8.     context.fill();   
9. ｝  

     圓角

XML/HTML Code複製內容到剪貼簿

1. var canvas = document.getElementBy>document
2. .getElementBy; >
if (canvas.getContext) {   
    context.beginPath();   
    context.moveTo(20,20);   
    context.lineTo(70,20);   
       // 為路徑畫弧度p1.x p1.y p2.x, p2.y 弧半徑，    
    context.arcTo(120,30,120,70, 50);   
    context.lineTo(120,120);   
    context.stroke();   
        
    // 擦除canvas 畫板   
    context.beginPath();   
    context.fillRect(10,10,200,100);   
        
    // 擦除區域   
    context.clearRect(30,30,50,50);   
｝  

二次貝塞爾曲線

XML/HTML Code

複製內容到剪貼簿

1. var canvas = document.getElementBy>
document
2. .getElementBy; >
3. if (canvas.getContext) {   
4.       context.beginPath();   
5.       context.moveTo(100,100);   
6.       context.quadraticCurveTo(20,50,200,20);   
7.       context.stroke();   

｝  

    

三次貝塞爾曲線

XML/HTML Code

複製內容到剪貼簿

1. var 勞動 = 文件.getElementById('canvas');   
2. if (canvas.getContext) {   
3.      context.moveTo(68,130);   
4.      var cX1 = 20;   
5.      var cY1 = 10;   
6.      var cX2 = 268;   
7.      var cY2 = 10;   
8.      var endX = 268;   
9.      var endY = 170;   
10.      context.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);   
11.      context.lines();   
12.         
13.     // 利用剪輯指定繪圖區域，之後指定繪圖區域，只能在繪圖區域中進行繪圖擦歐總   
14.     // 均勻圓   
15.     context.arc(100,100,40,0, 360 * Math.PI/ 180 , true);   
16.     // 限制區   
17.     context.clip();   
18.     //開始嘗試其他光源   
19.     context.beginPath();   
20.     context.fillStyle = 'lightblue';   
21.     //結果統計並未顯示   
22.     context.fillRect(0,0,300,150);   
23. }  

畫板進階使用

XML/HTML 程式碼將內容複製到剪貼簿

1. var canvas = document.getElementBy>document
.getElementBy; >
2. if (canvas.getContext) {   
3.     var context = canvas.Congetn('2d');
4.     /*   
5.      * drawImage(image,dx,dy)   
6.      * drawImage(image,dx,dy,dw,dh)   
7.      * drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);   
8.      * image 繪圖物件   
9.      * dx dy canvas 的座標   
10.      * dw，dh 表示 image 即將在canvas中繪圖的位置   
11.      * sw，sh 表示image 所要繪圖的區域   
12.      * sx,sy 所要繪圖的起始位置    
13.      */   
14.     var image = document    context.drawImage(image, 0, 0);   
15.      var img
16.  = new 新        
img.src
17.  = 'images/1.jpg''images/1.jpg';      
18. img.onload = functionfunction
19.              
20.          // drawImage    
21.          // 從 0,0 座標開始繪製   
22.          // context.drawImage(img,0,0);   
23.          // 從0，且0 開始,繪製完整圖至100,100 長寬   
24.          // context.drawImage(img, 0, 0, 100, 100);  
25.          // 截圖,50,50 到 100,100 從 260,130 開始繪製，並放置至 100,100 260,130 開始繪製，並放置至 100,100 260,130 
26.          // context.drawImage(img, 50, 50, 100,100, 260, 130, 100,             
27.          // 利用getImageData 與 putImageData 繪圖   
28.   
29.          context.drawImage(img, 10, 10);   
30.          // 從畫板上取得像素資料   
31.          // 起始位置， 結束位置   
32.          var 
33. imgData = context
34.          // 將資料繪製至畫板指定位置座標   
35.          context.putImageData(imgData,10,260);   
36.          // 將所去的像素資料一部分，並畫到畫板上   
37.          context.putImageData(imgData,200,260,50,50,100,100);      
38.              
39.          // createImageData 建立像素   
40.           var imgData = context = context
 = 
41. context
42.           // 以建立指定大小的空格物件              var imgData01 = context
 = 
43. context
              
44.           for (i =  = imgData01.width
 * imgData01.height * 4; i =4) {   
              // 紅色像素   
              imgData01.data[i   0] = 255;   
              imgData01.data[i 1] = 0;   
              imgData01.data[i 2] = 0;   
              imgData01.data[i 3] = 255;   
                  
          }   
          context.putImageData(imgData01, 10, 260);   
     }   
}