HTML5 Canvas實作圖片縮放、翻轉、色彩漸層的程式碼範例_html5教學技巧

翻轉、移動、平移、放大、縮小

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

1. var 畫布 = 文件.getElementByy@文件
.getElementByyId('canvas'); >
2. if (canvas.getContext) {   
3.     var 上下文 = 畫布.getContext('2d');
4.     //放大與縮小   
5.     context.beginPath();   
6.     context.行程樣式 = "#000000""#000000"
7. "#000000"
"#000000"
8. ;
    context.中風長方形(10,10,150,100);   
        
    // 放大3倍   
    context.scale(3,3);   
12.     context.beginPath();        context.行程樣式
 = 
13. '#cccccc'
14. '#cccccc';
15.     context.行程矩形(10,10,150,100)   
16.         
17.     //縮小   
18.     context.scale(0.5,0.5);        context.beginPath();        context.行程樣式
19.  = '#cccccc'
20. '#cccccc'
;
21.     context.StrongRect(10,10,150,100)   
22.               // 跳        var 
img
23.  = new new 
new
24.  new      img.src
 = 
25. 'images/1.jpg'
26. 'images/1.jpg'
'images/1.jpg'
27. ;
    
28. img.onload = 函數(){🎜>函數(){  >         context.drawImage(img, 10,10);                    context.scale(1, -1);            context.drawImage(img, 0, -500);        }  
29.     // 平移   
30.     context.beginPath();   
31.     context.行程樣式 = '#000000''#000000'
32. '#000000'
33. '#000000'
'#000000'
34. ;
    context.中風矩形(10,101,150,100);   
    // x移動 50  y 移動100   
36.     context.translate(50,100);        context.beginPath();   
    
37. context.行程樣式
 = 
38. '#cccccc'
39. '#cccccc';
40.     context.中風長方形(10,10,150,100);        // 旋轉        context.beginPath();   
41.     context.行程樣式
42.  = '#000000'
43. '#000000'
44. '#000000'
'#000000'
45. '#000000'
46. ;     context.中風矩形(200,50,100,50);   
47.     //預設旋轉是根據0,0中心，使用translate可以依照自己設定的中心旋轉   
48.     context.translate(250,75);   
49.             context.rotate(45 * Math.PI /180);        context.translate(-250, -75);   
50.   
51.     context.beginPath();   
52.     
53. context.行程樣式 = 
54. '#cccccc''#cccccc';     context.中風矩形(200,50,100,50);   
        
    // 轉換 矩陣   
    context.beginPath();   
    
58. context.行程樣式
 = 
59. '#000000''#000000''#000000''#000000'
60. '#000000'
;
61.     context.中風長方形(10,10,150,100);   
62.        

    context.transform(3,0,0,3,0,0);   

    context.beginPath();   

    context.行程樣式 = 

'#cccccc''#cccccc';     context.中風長方形(10,10,150,100);             }   突變、影像組合效果、顏色切換 XML/HTML 程式碼將內容複製到剪貼簿

1. var canvas = document.getElementBy>document
.getElementBy; >
2. if (canvas.getContext) {   
3.     var context = canvas.Congetn('2d');
4.     // 線性繪圖漸層   
5.     var grd = context.create     // postion 必須是0.1-1.0之間的垂直，表示漸層中顏色的地點相對地位，color表示顏色   
6.     grd.addColorStop(0.1, "#00ff00");   
7.     grd.addColorStop(0.8, "#ff0000");   
8.        
9.     
10. context.fillStyle =      context.fillRect(0,0, 200,100);        // 徑向漸層   
11.     var 
12. grd = 
13. context     grd.addColorStop(0.1, "#00ff00");        grd.addColorStop(0.8, '#ff0000');   
14.     
context.fillStyle
15.  = 
16.     context.fillRect(0,0,200,200);        // 影像組合效果         
context.fillStyle
17.  = 
'#00ff00'
18. '#00ff00'
19. ;      context.fillRect(10,10,50,50);         // 新繪圖         //
20. context.globalCompositeOperation  = 
21.      // 只繪製新內容，並刪除所有其他內容   
22.      context.globalCompositeOperation = 'copy' = 
'copy'
23.  = 'copy'
 = 
24. 'copy' = 'copy' =       // 圖形重疊的地方，其色彩值相減後決定   
25.      context.globalCompositeOperation
26.  = 'darker' =  '      // 畫布上已經有的內容只會載和其他圖形重疊的地方保留   
     
27. context.globalCompositeOperation
 = 
28. 'destination-atop' 🎜>     // 參考 http://www.w3school.com.cn/htmldom/prop_canvasrenderingcontext2d_globalcompositeoperation.asp         context.beginPath();   
     
29. context.fillStyle
 = 
30. '#ff0000'
31. '#ff0000';
32.      context.arc(50,50,30,0, 2 * Math.PI);   
33.      context.fill();   
34.         
35.      // 顏色轉換   
36.      var img = new 新
 
37.             
38.      img.src = 'images/1.jpg'
'images/1.jpg'
39. ;      img.onload = 函數
()
         context.drawImage(img, 0,0, 1, 1);   
41.          var imgData =  🎜>
         var 
42. 像素 = imgData = imgData = 
imgData         console.log(像素);   
43.           for(var i =  = 像素.length; i  n n n
;
             為中所[i] = 255 - 像素[i]；  
             為中所[i 1] = 255 - 像素[i   1]；  
             為中所[i 2] = 255 - 像素[i   2]；  
         }   
         context.putImageData(imgData, 250, 0);   
     }   
}