这篇文章主要介绍了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);   

     }   

}