Exemple de code HTML5 Canvas pour implémenter les compétences du didacticiel de mise à l'échelle, de retournement et de dégradé de couleurs_html5 d'image

Retourner, déplacer, faire un panoramique, zoomer, dézoomer

Code XML/HTMLCopier le contenu dans le presse-papiers

1. var canvas = document.getElementById('canvas');   
2. if (canvas.getContext) {   
3.     var context = canvas.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 = nouveau Image();   
23.     img.src = 'images/1.jpg';   
24.     img.onload = fonction(){   
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中心，使用translate可以按照自己的设置的中心旋转   
43.     context.translate(250,75);   
44.        
45.     context.rotate(45 * Math.PI /180);   
46.     context.translate(-250, -75);   
47.   
48.     context.beginPath();   
49.     context.StrokeStyle = '#cccccc';   
50.     context.StrokeRect(200,50,100,50);   
51.         
52.     // transformer 矩阵   
53.     context.beginPath();   
54.     context.StrokeStyle = '#000000';   
55.     context.StrokeRect(10,10,150,100);   
56.        
57.     context.transform(3,0,0,3,0,0);   
58.     context.beginPath();   
59.     context.StrokeStyle = '#cccccc';   
60.     context.StrokeRect(10,10,150,100);   
61.         
62. }  

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

Code XML/HTML复制内容到剪贴板

1. var canvas = document.getElementById('canvas'); >
if (canvas.getContext) {
var
3. context = canvas.getContext('2d'); // Dégradé de dessin linéaire
4. var
grd
5. = context.createLinearGradient(0,0,200,100); // la position doit être verticale entre 0,1 et 1,0, indiquant la position relative de la couleur dans le dégradé, la couleur représente la couleur
grd.addColorStop(0.1, "#00ff00");
grd.addColorStop(0.8, "#ff0000");
 
9. context.fillStyle
=
10. grd; context.fillRect(0,0, 200,100); // Dégradé radial
11. var
grd
12. =
context
13. .createRadialGradient(100,100,10,100,100,50); grd.addColorStop(0.1, "#00ff00"); grd.addColorStop(0.8, '#ff0000');
context.fillStyle
15. =
grd
16. ; context.fillRect(0,0,200,200); // Effet de combinaison d'images
17. context.fillStyle
=
18. '#00ff00'
19. context.fillRect(10,10,50,50); // Nouveau dessin
//
20. context.globalCompositeOperation
=
21. "source-over"
22. // Dessinez uniquement le nouveau contenu, supprimez tous les autres contenus context.globalCompositeOperation
=
23. 'copie'
24. // Là où les graphiques se chevauchent, les valeurs de couleur sont soustraites pour déterminer context.globalCompositeOperation
=
25. 'plus sombre'
26. ; // Le contenu déjà présent sur le canevas ne sera conservé que là où il chevauche d'autres graphiques context.globalCompositeOperation
=
27. 'destination-au sommet'
28. // Référence http://www.w3school.com.cn/htmldom/prop_canvasrenderingcontext2d_globalcompositeoperation.asp context.beginPath();
29. context.fillStyle
=
30. '#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);   
     }   
}