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

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. }

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

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';