HTML5 Canvas code example for scaling, turning, and color gradient of images,

HTML5 Canvas code example for scaling, turning, and color gradient of images,

Flip, move, pan, zoom in, zoom out

Copy XML/HTML Code to clipboard

1. Var canvas = document. getElementById ('canvas ');
2. If (canvas. getContext ){
3. Var context = canvas. getContext ('2d ');
4. // Zoom in and out
5. Context. beginPath ();
6. Context. strokeStyle = "#000000 ";
7. Context. strokeRect (10, 10, 150,100 );
9. // Zoom in 3 times
10. Context. scale (3, 3 );
11. Context. beginPath ();
12. Context. strokeStyle = '# cccccc ';
13. Context. strokeRect (10, 10, 150,100)
15. // Zoom out
16. Context. scale (0.5, 0.5 );
17. Context. beginPath ();
18. Context. strokeStyle = '# cccccc ';
19. Context. strokeRect (10, 10, 150,100)
21. // Flip
22. Var img = new Image ();
23. Img. src = 'images/1.jpg ';
24. Img. onload = function (){
25. Context. drawImage (img, 10, 10 );
26. Context. scale (1,-1 );
27. Context. drawImage (img, 0,-500 );
28. }
29. // Translation
30. Context. beginPath ();
31. Context. strokeStyle = '#000000 ';
32. Context. strokeRect (10,101,150,100 );
33. // X move 50 y move 100.
34. Context. translate (50,100 );
35. Context. beginPath ();
36. Context. strokeStyle = '# cccccc ';
37. Context. strokeRect (10, 10, 150,100 );
38. // Rotate
39. Context. beginPath ();
40. Context. strokeStyle = '#000000 ';
41. Context. strokeRect (200,50, 100,50 );
42. // By default, the rotation is based on the 0, 0 center. You can use the translate function to rotate the center according to your settings.
43. Context. translate (250,75 );
45. Context. rotate (45 * Math. PI/180 );
46. Context. translate (-250,-75 );
48. Context. beginPath ();
49. Context. strokeStyle = '# cccccc ';
50. Context. strokeRect (200,50, 100,50 );
52. // Transform matrix
53. Context. beginPath ();
54. Context. strokeStyle = '#000000 ';
55. Context. strokeRect (10, 10, 150,100 );
57. Context. transform );
58. Context. beginPath ();
59. Context. strokeStyle = '# cccccc ';
60. Context. strokeRect (10, 10, 150,100 );
62. }

Gradient, Image Combination effect, color flip

Copy XML/HTML Code to clipboard

1. Var canvas = document. getElementById ('canvas ');
2. If (canvas. getContext ){
3. Var context = canvas. getContext ('2d ');
4. // Linear gradient Rendering
5. Var grd = context. createLinearGradient (200,100 );
6. // Postion must be vertical between 0.1-1.0, indicating the relative position of the color location in the gradient, and color indicates the color
7. Grd. addColorStop (0.1, "#00ff00 ");
8. Grd. addColorStop (0.8, "# ff0000 ");
10. Context. fillStyle = grd;
11. Context. fillRect (0, 0, 200,100 );
12. // Radial gradient
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. // Image Combination Effect
19. Context. fillStyle = '#00ff00 ';
20. Context. fillRect (10, 10, 50, 50 );
21. // New Drawing
22. // Context. globalCompositeOperation = "source-over ";
23. // Only draw new content and delete all other content
24. Context. globalCompositeOperation = 'copy ';
25. // Where the image overlaps, the color value is determined after the subtraction
26. Context. globalCompositeOperation = 'darker ';
27. // The existing content on the canvas is retained only when it overlaps with other images.
28. Context. globalCompositeOperation = 'destination-atop ';
29. // Reference http://www.w3school.com.cn/htmldom/prop_canvasrenderingcontext2d_globalcompositeoperation.asp
30. Context. beginPath ();
31. Context. fillStyle = '# ff0000 ';
32. Context. arc (50, 50, 30, 0, 2 * Math. PI );
33. Context. fill ();
35. // Color flip
36. Var img = new Image ();
38. Img. src = 'images/1.jpg ';
39. Img. onload = function (){
40. Context. drawImage (img, 0, 0, 1, 1 );
41. Var imgData = context. getImageData (0, 0, 1, 1 );
42. Var pixels = imgData. data;
43. Console. log (pixels );
44. For (var I = 0, n = pixels. length; I <n; I + = 4 ){
45. Pixels [I] = 255-pixels [I];
46. Pixels [I + 1] = 255-pixels [I + 1];
47. Pixels [I + 2] = 255-pixels [I + 2];
48. }
49. Context. putImageData (imgData, 250, 0 );
50. }
51. }