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