HTML5中Canvas实现图片缩放、翻转、颜色渐变的示例分析

这篇文章将为大家详细讲解有关HTML5中Canvas实现图片缩放、翻转、颜色渐变的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

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

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

var canvas = document.getElementById('canvas');   
if (canvas.getContext) {   
    var context = canvas.getContext('2d');   
    // 放大与缩小   
    context.beginPath();   
    context.strokeStyle = "#000000";   
    context.strokeRect(10,10,150,100);   
        
    // 放大3倍   
    context.scale(3,3);   
    context.beginPath();   
    context.strokeStyle = '#cccccc';   
    context.strokeRect(10,10,150,100)   
        
    // 缩小   
    context.scale(0.5,0.5);   
    context.beginPath();   
    context.strokeStyle = '#cccccc';   
    context.strokeRect(10,10,150,100)   
        
     // 翻转   
    var img = new Image();   
    img.src = 'images/1.jpg';   
    img.onload = function(){   
        context.drawImage(img, 10,10);           
        context.scale(1, -1);   
        context.drawImage(img, 0, -500);   
    }   
    // 平移   
    context.beginPath();   
    context.strokeStyle = '#000000';   
    context.strokeRect(10,101,150,100);   
    // x移动 50  y 移动100   
    context.translate(50,100);   
    context.beginPath();   
    context.strokeStyle = '#cccccc';   
    context.strokeRect(10,10,150,100);   
    // 旋转   
    context.beginPath();   
    context.strokeStyle = '#000000';   
    context.strokeRect(200,50,100,50);   
    // 默认旋转是根据0,0中心，使用translate可以按照自己的设置的中心旋转   
    context.translate(250,75);   
       
    context.rotate(45 * Math.PI /180);   
    context.translate(-250, -75);   
  
    context.beginPath();   
    context.strokeStyle = '#cccccc';   
    context.strokeRect(200,50,100,50);   
        
    // transform 矩阵   
    context.beginPath();   
    context.strokeStyle = '#000000';   
    context.strokeRect(10,10,150,100);   
       
    context.transform(3,0,0,3,0,0);   
    context.beginPath();   
    context.strokeStyle = '#cccccc';   
    context.strokeRect(10,10,150,100);   
        
}

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

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

var canvas = document.getElementById('canvas');   
if (canvas.getContext) {   
    var context = canvas.getContext('2d');   
    // 线性绘制渐变   
    var grd = context.createLinearGradient(0,0,200,100);   
    // postion 必须是0.1-1.0之间的竖直，表示渐变中颜色的地点相对地位，color表示颜色   
    grd.addColorStop(0.1, "#00ff00");   
    grd.addColorStop(0.8, "#ff0000");   
       
    context.fillStyle = grd;   
    context.fillRect(0,0, 200,100);   
    // 径向渐变   
    var grd = context.createRadialGradient(100,100,10,100,100,50);   
    grd.addColorStop(0.1, "#00ff00");   
    grd.addColorStop(0.8, '#ff0000');   
    context.fillStyle = grd;   
    context.fillRect(0,0,200,200);   
    // 图像组合效果   
     context.fillStyle = '#00ff00';   
     context.fillRect(10,10,50,50);   
     // 新绘图   
     //context.globalCompositeOperation  = "source-over";   
     // 只绘制新内容，删除其他所有内容   
     context.globalCompositeOperation = 'copy';   
     // 图形重叠的地方，其颜色值相减后决定   
     context.globalCompositeOperation = 'darker';   
     // 画布上已经有的内容只会载和其他图形重叠的地方保留   
     context.globalCompositeOperation = 'destination-atop';   
     // 参考 http://www.w3school.com.cn/htmldom/prop_canvasrenderingcontext2d_globalcompositeoperation.asp   
     context.beginPath();   
     context.fillStyle = '#ff0000';   
     context.arc(50,50,30,0, 2 * Math.PI);   
     context.fill();   
        
     // 颜色翻转   
     var img = new Image();   
          
     img.src = 'images/1.jpg';   
     img.onload = function(){   
         context.drawImage(img, 0,0, 1, 1);   
         var imgData = context.getImageData(0,0, 1,1);   
         var pixels = imgData.data;   
         console.log(pixels);   
         for(var i = 0, n = pixels.length; i < n; i+=4) {   
             pixels[i] = 255 - pixels[i];   
             pixels[i+1] = 255 - pixels[i + 1];   
             pixels[i+2] = 255 - pixels[i + 2];   
         }   
         context.putImageData(imgData, 250, 0);   
     }   
}

关于“HTML5中Canvas实现图片缩放、翻转、颜色渐变的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。