Html5 canvas画图教程23:全局透明度globalAlpha

本文属于《html5 Canvas画图系列教程

大家都知道html5里面可以使用rgba颜色,这对我们做半透明效果时非常有用。在canvas中,我们可以用rgba颜色来实现半透明填充或描边。

如果有下面的需求:

我要画N个图形,他们的颜色都不一样,但有个共同点是:所有图形都是50%半透明。

这时如果用rgba来实现,就有点繁琐了。

如果是CSS,我们可以直接设置父元素的opacity搞定;在canvas里,则有个类似的属性globalAlpha.

globalAlpha的值与opacity一样,都是0-1的小数。设置之后,以后的图形都将以其规定的透明度绘制。

ctx.globalAlpha = 0.5;

如何将globalAlpha恢复到初始状态呢?你可以简单的将其重设为1,或者使用restore()函数复原。

本文没有代码,哈哈。

另外要注意,半透明的颜色会对getImageData的获取结果造成影响——显而易见的。

发表评论

电子邮件地址不会被公开。