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

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