Canvas 渐变图像组合效果颜色翻转

最新推荐文章于 2019-09-02 15:20:00 发布

Msro

最新推荐文章于 2019-09-02 15:20:00 发布

阅读量193

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/wangdk/blog/125793

本文介绍如何使用HTML5的Canvas API进行基本的绘图操作，包括创建线性和径向渐变并填充矩形区域，实现图像的颜色翻转效果，以及设置不同的图像组合模式。

// canvas 简单例子
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);
//       }
}

转载于:https://my.oschina.net/wangdk/blog/125793