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