欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-11 18:29:47
...
翻转、移动、平移、放大、缩小
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);
  8. // 放大3倍
  9. context.scale(3,3);
  10. context.beginPath();
  11. context.strokeStyle = '#cccccc';
  12. context.strokeRect(10,10,150,100)
  13. // 缩小
  14. context.scale(0.5,0.5);
  15. context.beginPath();
  16. context.strokeStyle = '#cccccc';
  17. context.strokeRect(10,10,150,100)
  18. // 翻转
  19. var img = new Image();
  20. img.src = 'images/1.jpg';
  21. img.onload = function(){
  22. context.drawImage(img, 10,10);
  23. context.scale(1, -1);
  24. context.drawImage(img, 0, -500);
  25. }
  26. // 平移
  27. context.beginPath();
  28. context.strokeStyle = '#000000';
  29. context.strokeRect(10,101,150,100);
  30. // x移动 50 y 移动100
  31. context.translate(50,100);
  32. context.beginPath();
  33. context.strokeStyle = '#cccccc';
  34. context.strokeRect(10,10,150,100);
  35. // 旋转
  36. context.beginPath();
  37. context.strokeStyle = '#000000';
  38. context.strokeRect(200,50,100,50);
  39. // 默认旋转是根据0,0中心,使用translate可以按照自己的设置的中心旋转
  40. context.translate(250,75);
  41. context.rotate(45 * Math.PI /180);
  42. context.translate(-250, -75);
  43. context.beginPath();
  44. context.strokeStyle = '#cccccc';
  45. context.strokeRect(200,50,100,50);
  46. // transform 矩阵
  47. context.beginPath();
  48. context.strokeStyle = '#000000';
  49. context.strokeRect(10,10,150,100);
  50. context.transform(3,0,0,3,0,0);
  51. context.beginPath();
  52. context.strokeStyle = '#cccccc';
  53. context.strokeRect(10,10,150,100);
  54. }

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

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");
  9. context.fillStyle = grd;
  10. context.fillRect(0,0, 200,100);
  11. // 径向渐变
  12. var grd = context.createRadialGradient(100,100,10,100,100,50);
  13. grd.addColorStop(0.1, "#00ff00");
  14. grd.addColorStop(0.8, '#ff0000');
  15. context.fillStyle = grd;
  16. context.fillRect(0,0,200,200);
  17. // 图像组合效果
  18. context.fillStyle = '#00ff00';
  19. context.fillRect(10,10,50,50);
  20. // 新绘图
  21. //context.globalCompositeOperation = "source-over";
  22. // 只绘制新内容,删除其他所有内容
  23. context.globalCompositeOperation = 'copy';
  24. // 图形重叠的地方,其颜色值相减后决定
  25. context.globalCompositeOperation = 'darker';
  26. // 画布上已经有的内容只会载和其他图形重叠的地方保留
  27. context.globalCompositeOperation = 'destination-atop';
  28. // 参考 http://www.w3school.com.cn/htmldom/prop_canvasrenderingcontext2d_globalcompositeoperation.asp
  29. context.beginPath();
  30. context.fillStyle = '#ff0000';
  31. context.arc(50,50,30,0, 2 * Math.PI);
  32. context.fill();
  33. // 颜色翻转
  34. var img = new Image();
  35. img.src = 'images/1.jpg';
  36. img.onload = function(){
  37. context.drawImage(img, 0,0, 1, 1);
  38. var imgData = context.getImageData(0,0, 1,1);
  39. var pixels = imgData.data;
  40. console.log(pixels);
  41. for(var i = 0, n = pixels.length; i n; i+=4) {
  42. pixels[i] = 255 - pixels[i];
  43. pixels[i+1] = 255 - pixels[i + 1];
  44. pixels[i+2] = 255 - pixels[i + 2];
  45. }
  46. context.putImageData(imgData, 250, 0);
  47. }
  48. }
相关标签: Canvas HTML5