前端基础_组合多个图形

组合多个图形

在前面的实例中，我们看到使用Canvas API可以将一个图形重叠绘制在另一个图形上面，但图形中能够被看到的部分完全取决于以哪种方式进行组合，这时需要使用到Canvas API的图形组合技术。在HTML5中，只要用图形上下文对象的globalCompositeOperation属性就能自己决定图形的组合方式，使用方法如下。

context.globalCompositeOperation = type

type的值必须是下面几种字符串之一。

下面将以图形组合的方式，来说明type值的字符串表现形式。

在下面的图形中，黑色方块是先绘制的，即“已有的canvas内容”，灰色圆形是后面绘制的，即“新图形”。

　source-over
这是默认设置，表示新图形会覆盖在原有图形之上。效果如图17.23所示。
　destination-over
表示会在原有图形之下绘制新图形。效果如图17.24所示。
　source-in
新图形会仅仅出现与原有图形重叠的部分，其他区域都变成透明的。
　destination-in

原有图形中与新图形重叠的部分会被保留，其他区域都变成透明的。效果如图17.26所示。

　source-out

只有新图形中与原有内容不重叠的部分会被绘制出来。效果如图17.27所示。
　destination-out
原有图形中与新图形不重叠的部分会被保留。效果如图17.28所示。
　source-atop

只绘制新图形中与原有图形重叠的部分和未被重叠覆盖的原有图形，新图形的其他部分变成透明。
　destination-atop

只绘制原有图形中被新图形重叠覆盖的部分与新图形的其他部分，原有图形中的其他部分变成透明，不绘制新图形中与原有图形相重叠的部分。效果如图17.30所示。
　lighter
两图形中重叠部分作加色处理。
　darker
两图形中重叠的部分作减色处理。效果如图17.32所示。
　xor
重叠的部分会变成透明。效果如图17.33所示。
　copy
只有新图形会被保留，其他都被清除掉。
https://www.bilibili.com/video/BV1qL411u7eEhttps://www.bilibili.com/video/BV1qL411u7eE

前端基础_组合多个图形相关推荐

前端基础_认识前端.md
前端学习前端学习路线学习网站菜鸟驿站慕课网 freeCOdeCamp w3school try8 在线编辑 codepen jsfiddle thecodeplayer 其他网站 cssfil ...
前端基础_像素的处理
像素的处理在HTML5中使用canvas API所能够做到的图像处理技术中,还有一个更让人惊讶的技术就是像素处理技术.使用canvas API能够获取图像中的每一个像素,然后得到该像素颜色的rgb值 ...
前端基础_配置IIS服务器
配置IIS服务器在应用程序完全离线之前,还需要正确地提供清单文件.清单文件必须有扩展名.manifest和正确的mime-type. 如果使用Apache这样的通用Web服务器,需要找到在AppSe ...
gif透明背景动画_前端基础系列之bmp、jpg、png、gif、svg常用图片格式浅谈（二）...
IT客栈作者:大腰子 bmp.jpg.png.gif.svg常用图片格式之前为大家介绍了几种WEB前端常用的图片格式,对比了它们的特点,参见<前端基础系列之bmp.jpg.png.gif.s ...
boost log 能不能循环覆盖_前端基础进阶（十四）：深入核心，详解事件循环机制...
Event Loop JavaScript的学习零散而庞杂,很多时候我们学到了一些东西,但是却没办法感受到进步!甚至过了不久,就把学到的东西给忘了.为了解决自己的这个困扰,在学习的过程中,我一直在试图 ...
python前端基础知识总结及部分练习题
python前端基础知识总结知识总结认识Python 发展历史版本选择 python2.7是python2的最后一个版本,到2020年将不再维护 python3.6是python3最新的版本,是 ...
第二章网页前端基础与HTTP协议
第二章网页前端基础与HTTP协议爬虫需要遵循网络传输协议才能与服务器进行通信,当与服务器建立通信后,爬虫才能获取网页内容,从而获取想要爬取的内容.获取到的网页内容通常为HTML(HyperText ...
计算机课件文字,计算机应用基础_文字处理wordppt课件.ppt
<计算机应用基础_文字处理wordppt课件.ppt>由会员分享,提供在线免费全文阅读可下载,此文档格式为ppt,更多相关<计算机应用基础_文字处理wordppt课件.ppt> ...
前端基础（HTML、CSS、JS）
前端基础(HTML.CSS.JS) 1 HTML 1.1 文件标签 1.2 排版标签 1.3 字体标签 1.4 列表标记 1.4.1 有序列表 1.4.2 无序列表 1.5 图片标签 1.6 超链接标 ...

前端基础_组合多个图形

前端基础_组合多个图形相关推荐

最新文章

热门文章