网易乐得技术团队

闪瞎眼的canvas混色进阶级研究

关于canvas混色(globalCompositeOperation)的几种属性值:

1

在canvas上绘制一张图片

1
2
3
4
ctx = canvas.getContext("2d");
ctx.save();
ctx.drawImage(img, 0,0);
ctx.restore();

加入混色很简单:

1
2
3
4
5
ctx = canvas.getContext("2d");
ctx.save();
ctx.globalCompositeOperation = "lighter"; //设置混色的属性值
ctx.drawImage(img, 0,0);
ctx.restore();

我们比较常用的,移动端兼容性比较好的两种混色:

destination-out 主要用于刮奖效果
lighter混合效果,也是下边主要讲的

lighter:合成类混色,就如同下方的图片,两种颜色会合并为另外一种不同的颜色
如下图,凤凰帧动画没有任何改变,只是背景颜色发生了变化,就会让凤凰的效果也随之变化。
2

一些实例分析:

混色在项目中不是很常用,但是有的时候加上一些混色就会让项目高大上起来

1、我们可以做两层logo,下方logo是一张普通的图片,上方logo是一张属性为lighter的混色图片,我们对混色图片的透明度做一些简单的正弦动画,就能得到下方图片的效果:

1
2
3
4
logoTop.update = function(t) {
this.ct += t,
this.alpha = 1 - 0.8 * Math.sin(this.ct % 1200 * Math.PI / 1200)
}

3

2、我们可以对阳光图片的位置,透明度做简单的动画控制,就能实现下方的照射效果:

1
2
3
4
5
6
7
sun.update = function(t) {
this.ct += t;
var _n = Math.sin(this.ct * Math.PI / 1000);
this.x -= _n * 2;
this.y += _n * 2;
this.alpha = Math.abs(_n) * 0.5;
}

4

3、简单的放大缩小加旋转:
5
6
7

4、lighter在游戏里比较常用,因为会与背景混合,颜色更加丰富,华丽,比如激光效果,点缀的光效,霹雳,一些随机数加上正弦动画会合并出意想不到的效果:
8

关于canvas混色的分析就这么多,有的时候多尝试,随便改改动画函数,就有可能得到意外的惊喜。