如何使用HTML5 Canvas实现图片缩放、颜色渐变效果

这篇文章主要为大家展示了“如何使用HTML5 canvas实现图片缩放、颜色渐变效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用html5 Canvas实现图片缩放、颜色渐变效果”这篇文章吧。

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

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实现图片缩放、颜色渐变效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网JavaScript频道！