HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例_html5教程技巧

翻转、移动、平移、放大、缩小

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

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);
9. // 放大3倍
10. context.scale(3,3);
11. context.beginPath();
12. context.strokeStyle = '#cccccc';
13. context.strokeRect(10,10,150,100)
15. // 缩小
16. context.scale(0.5,0.5);
17. context.beginPath();
18. context.strokeStyle = '#cccccc';
19. context.strokeRect(10,10,150,100)
21. // 翻转
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. // 平移
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);
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 矩阵
53. context.beginPath();
54. context.strokeStyle = '#000000';
55. context.strokeRect(10,10,150,100);
57. context.transform(3,0,0,3,0,0);
58. context.beginPath();
59. context.strokeStyle = '#cccccc';
60. context.strokeRect(10,10,150,100);
62. }

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

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

1. var canvas = document.getElementById('canvas');
2. if (canvas.getContext) {
3. var context = canvas.getContext('2d');
4. // 线性绘制渐变
5. var grd = context.createLinearGradient(0,0,200,100);
6. // postion 必须是0.1-1.0之间的竖直，表示渐变中颜色的地点相对地位，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. // 径向渐变
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 = "source-over";
23. // 只绘制新内容，删除其他所有内容
24. context.globalCompositeOperation = 'copy';
25. // 图形重叠的地方，其颜色值相减后决定
26. context.globalCompositeOperation = 'darker';
27. // 画布上已经有的内容只会载和其他图形重叠的地方保留
28. context.globalCompositeOperation = 'destination-atop';
29. // 参考 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. // 颜色翻转
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. }