• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例

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

    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.         
    9.     // 放大3倍   
    10.     context.scale(3,3);   
    11.     context.beginPath();   
    12.     context.strokeStyle = '#cccccc';   
    13.     context.strokeRect(10,10,150,100)   
    14.         
    15.     // 缩小   
    16.     context.scale(0.5,0.5);   
    17.     context.beginPath();   
    18.     context.strokeStyle = '#cccccc';   
    19.     context.strokeRect(10,10,150,100)   
    20.         
    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);   
    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.     // transform 矩阵   
    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. }  

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

    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.        
    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();   
    34.         
    35.      // 颜色翻转   
    36.      var img = new Image();   
    37.           
    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. }  
    上一篇：一波HTML5 Canvas基础绘图实例代码集合
    下一篇：HTML5实现动画效果的方式汇总
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例 HTML5,Canvas,实现,图片,缩放,