이미지 크기 조정, 뒤집기 및 색상 그래디언트_html5 튜토리얼 기술을 구현하는 HTML5 캔버스 코드 예

뒤집기, 이동, 이동, 확대, 축소

XML/HTML 코드클립보드에 콘텐츠 복사

1. var 캔버스 = 문서.getElementById('canvas');   
2. if (canvas.getContext) {   
3.     var 컨텍스트 = 캔버스.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.strokRect(10,10,150,100)   
14.         
15.     // 작게   
16.     context.scale(0.5,0.5);   
17.     context.beginPath();   
18.     context.StrokeStyle = '#cccccc';   
19.     context.strokRect(10,10,150,100)   
20.         
21.      // 翻转   
22.     var img = new 이미지();   
23.     img.src = 'images/1.jpg';   
24.     img.onload = 기능(){   
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.strokRect(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.     // 변환 矩阵   
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. }  

渐变、图image组合效果、颜color翻转

XML/HTML 코드复复内容到剪贴板

1. var 캔버스 = 문서.getElementById('canvas')
2. if (canvas.getContext) {
3. var context = canvas.getContext('2d')
4. // 선형 그리기 그라데이션
5. var grd = context.createLinearGradient(0,0,200,100)
6. // 위치는 0.1-1.0 사이의 수직이어야 하며, 이는 그라데이션에서 색상의 상대적 위치를 나타냅니다. 색상은 색상을 나타냅니다.
7. grd.addColorStop(0.1, "#00ff00")
8. grd.addColorStop(0.8, "#ff0000")
9.  
10. context.fillStyle = grd
11. context.fillRect(0,0, 200,100)
12. // 방사형 그래디언트
13. var grd = context.createRadialGradient(100,100,10,100,100,50)
14. grd.addColorStop(0.1, "#00ff00")
15. grd.addColorStop(0.8, '#ff0000')
16. context.fillStyle = grd
17. context.fillRect(0,0,200,200)
18. // 이미지 조합 효과
19. context.fillStyle = '#00ff00'
20. context.fillRect(10,10,50,50)
21. // 새 그림
22. //context.globalCompositeOperation = "소스 오버";
// 새 콘텐츠만 그리기, 나머지 콘텐츠는 모두 삭제
24. context.globalCompositeOperation = '복사'
// 그래픽이 겹치는 부분에서는 색상값을 빼서 결정
26. context.globalCompositeOperation = '더 어둡게'; // 이미 캔버스에 있는 내용은 다른 그래픽과 겹치는 부분에만 유지됩니다.
context.globalCompositeOperation
28. = 'destination-atop'; // 참고 http://www.w3school.com.cn/htmldom/prop_canvasrenderingcontext2d_globalcompositeeration.asp
context.beginPath()
30. context.fillStyle
=
31. '#ff0000'
32.      context.arc(50,50,30,0, 2 * Math.PI);   
33.      context.fill();   
34.         
35.      // 颜color翻转   
36.      var img = new 이미지();   
37.           
38.      img.src = 'images/1.jpg';   
39.      img.onload = 기능(){   
40.          context.drawImage(img, 0,0, 1, 1);   
41.          var imgData = context.getImageData(0,0, 1,1);   
42.          var 픽셀 = imgData.data;   
43.          console.log(픽셀);   
44.          for(var i = 0, n = 픽셀.length;  i < n;  i =4) {   
45.              픽셀[i] = 255 - 픽셀[i];   
46.              픽셀[i 1] = 255 - 픽셀[i   1];   
47.              픽셀[i 2] = 255 - 픽셀[i   2];   
48.          }   
49.          context.putImageData(imgData, 250, 0);   
50.      }   
51. }