html5中globalCompositeOperation属性的详细介绍

PHP中文网 JavaScript 83 0

本文摘自PHP中文网，作者不言，侵删。

本篇文章给大家带来的内容是关于css3中background-orgin的使用方法（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

globalCompositeOperation的默认值属性是source-over

1、source-over及源在目标之上

1

2

3

4

5

context.fillStyle = 'aqua';

context.fillRect(50,50,100,100);//目标图形

context.globalCompositeOperation = 'source-over';

context.fillStyle = 'antiquewhite';

context.fillRect(100,100,100,100);//源图形

上面图形即为目标，下面图形为源

2、destination-over目标在源上

3、source-atop会将源绘制在目标之上，但是在重合区域上两者都是不透明的，绘制在其他位置上的目标是不透明的，源是透明的

1

2

3

4

5

context.fillStyle = 'aqua';

context.fillRect(50,50,100,100);

context.globalCompositeOperation = 'source-atop';

context.fillStyle = 'antiquewhite';

context.fillRect(100,100,100,100);

4、destination-atop与source-atop效果相反，在重叠部分两者都不透明，但在其他位置源不透明，目标透明

5、source-in源与目标重叠部分只显示源，其他部分都变成透明

6、destination-in 源与目标重叠部分，只显示目标，其他都变成透明

7、source-out只显示源未重叠部分，其他部分都不显示

8、destination-out只显示目标未重叠部分，其他部分都不显示

9、lighter这个值与顺序无关，如果源与目标重叠，就将两个颜色值相加，得到颜色最大取值为255，取值为白色

10、copy只复制源

11、只复制源和目标不重叠部分，重叠部分透明

相关推荐：

HTML5中属性download的详细介绍

详细介绍H5弹性盒布局的使用（父容器属性）

以上就是html5中globalCompositeOperation属性的详细介绍的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

使用canvas压缩图片的具体步骤

用javascript将canvas内容转化成图片的方法详解

html5 canvas如何绘制圆形？（代码实例）

怎样用canvas来绘制线条

怎么使用canvas绘制虚线

图文详解如何用canvas画实心圆和空心圆

html5 canvas学习的实例介绍

html5+canvas调用手机拍照功能实现图片上传功能（图文详解下篇）

怎样用canvas绘制星空,月亮,大地,添加文字

html5 canvas渐进填充与透明实现图像的mask效果

更多相关阅读请进入《canvas》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...

    暂无评论...