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

}

}

以上就是本文章的内容，希望对大家有所帮助