Contoh kod HTML5 Kanvas untuk melaksanakan kemahiran tutorial penskalaan imej, flipping dan kecerunan warna_html5

Terbalikkan, gerakkan, sorot, zum masuk, zum keluar

Kod XML/HTMLSalin kandungan ke papan keratan

1. var kanvas = dokumen.getElementById('canvas');   
2. jika (canvas.getContext) {   
3.     var konteks = kanvas.getContext('2d');   
4.     // 放大与缩小   
5.     context.beginPath();   
6.     context.strokeStyle = "#000000";   
7.     context.strokeRect(10,10,150,100);   
8.         
9.     // 放大3倍   
10.     context.scale(3,3);   
11.     context.beginPath();   
12.     context.strokeStyle = '#cccccc';   
13.     context.strokeRect(10,10,150,100)   
14.         
15.     // 缩小   
16.     context.scale(0.5,0.5);   
17.     context.beginPath();   
18.     context.strokeStyle = '#cccccc';   
19.     context.strokeRect(10,10,150,100)   
20.         
21.      // 翻转   
22.     var img = baharu Imej();   
23.     img.src = 'imej/1.jpg';   
24.     img.onload = fungsi(){   
25.         context.drawImage(img, 10,10);           
26.         context.scale(1, -1);   
27.         context.drawImage(img, 0, -500);   
28.     }  
29.     // 平移   
30.     context.beginPath();   
31.     context.strokeStyle = '#000000';   
32.     context.strokeRect(10,101,150,100);   
33.     // x移动 50  y 移动100   
34.     context.translate(50,100);   
35.     context.beginPath();   
36.     context.strokeStyle = '#cccccc';   
37.     context.strokeRect(10,10,150,100);   
38.     // 旋转   
39.     context.beginPath();   
40.     context.strokeStyle = '#000000';   
41.     context.strokeRect(200,50,100,50);   
42.     // 默认旋转是根据0,0中心，使用terjemah可以按照自己的设置的中心旋 
    context.translate(250,75);   
       
    context.rotate(45 * Math.PI /180);   
    context.translate(-250, -75);   
  
    context.beginPath();   
    
49. context.strokeStyle = '#cccccc';   
    context.strokeRect(200,50,100,50);   
        
    // mengubah 矩阵   
    context.beginPath();   
    
54. context.strokeStyle = '#000000';   
    context.strokeRect(10,10,150,100);   
       
    context.transform(3,0,0,3,0,0);   
    context.beginPath();   
    
59. context.strokeStyle = '#cccccc';   
    context.strokeRect(10,10,150,100);   
        
}  

渐变、图像组合效果、颜色翻转

Kod XML/HTML

复制内容到剪贴板

1. var kanvas = dokumen.getElementById('canvas'); >
jika (canvas.getContext) {
var
3. konteks = kanvas.getContext('2d'); // Kecerunan lukisan linear
4. var
grd
5. = konteks.createLinearGradient(0,0,200,100); // kedudukan mestilah menegak antara 0.1-1.0, menunjukkan kedudukan relatif warna dalam kecerunan, warna mewakili warna
grd.addColorStop(0.1, "#00ff00");
grd.addColorStop(0.8, "#ff0000");
 
9. context.fillStyle
=
10. grd context.fillRect(0,0, 200,100); // Kecerunan jejari
11. var
grd
12. =
konteks
13. .createRadialGradient(100,100,10,100,100,50.>); grd.addColorStop(0.1, "#00ff00"); grd.addColorStop(0.8, '#ff0000');
14. context.fillStyle =
15. grd
16. context.fillRect(0,0,200,200); // Kesan gabungan imej context.fillStyle
17. = '#00ff00'
18. ; context.fillRect(10,10,50,50);
19. // Lukisan baharu //context.globalCompositeOperation = "source-over"
20. ; // Hanya lukis kandungan baharu, padam semua kandungan lain
22. context.globalCompositeOperation = 'copy'; // Di mana grafik bertindih, nilai warna ditolak untuk menentukan
23. context.globalCompositeOperation
24. = 'lebih gelap'; // Kandungan yang sudah ada pada kanvas hanya akan dikekalkan apabila ia bertindih dengan grafik lain
25. context.globalCompositeOperation =
26. 'destination-atop'; // Rujukan http://www.w3school.com.cn/htmldom/prop_canvasrenderingcontext2d_globalcompositeoperation.asp context.beginPath();
27. context.fillStyle
28. = '#ff0000';
29.      context.arc(50,50,30,0, 2 * Math.PI);   
30.      context.fill();   
31.         
32.      // 颜色翻转   
33.      var img = neu Image();   
34.           
35.      img.src = 'images/1.jpg';   
36.      img.onload = Funktion(){   
37.          context.drawImage(img, 0,0, 1, 1);   
38.          var imgData = context.getImageData(0,0, 1,1);   
39.          var Pixel = imgData.data;   
40.          console.log(pixels);   
41.          for(var i = 0, n = Pixel.length; i < n; i =4) {   
42.              Pixel[i] = 255 - Pixel[i];   
43.              Pixel[i 1] = 255 - Pixel[i   1];   
44.              Pixel[i 2] = 255 - Pixel[i   2];   
45.          }   
46.          context.putImageData(imgData, 250, 0);   
47.      }   
48. }