canvas globalCompositeOperation
source-over 默认,相交部分由后绘制图形的填充(颜色,渐变,纹理)覆盖
source-in 只绘制相交部分,由后绘制图形的填充覆盖,其余部分透明
source-out 只绘制后绘制图形不相交的部分,由后绘制图形的填充覆盖,其余部分透明
source-atop 后绘制图形不相交的部分透明,相交部分由后绘制图形的填充覆盖
destination-over 相交部分由先绘制图形的填充(颜色,渐变,纹理)覆盖
destination-in 只绘制相交部分,由先绘制图形的填充覆盖,其余部分透明
destination-out 只绘制先绘制图形不相交的部分,由先绘制图形的填充覆盖,其余部分透明
destination-atop 先绘制图形不相交的部分透明,相交部分由先绘制图形的填充覆盖
lighter 相交部分由根据先后图形填充来增加亮度
darker 相交部分由根据先后图形填充来降低亮度
copy 只绘制后绘制图形
xor 相交部分透明
canvas globalCompositeOperation的更多相关文章
- HTML5 canvas globalCompositeOperation绘图类型讲解
我们总是将一个图形画在另一个之上,大多数情况下,这样是不够的.比如说,它这样受制于图形的绘制顺序.不过,我们可以利用 globalCompositeOperation 属性来改变这些做法.global ...
- [ html canvas globalCompositeOperation ] canvas绘图属性 设置合成图像如何显示 属性演示
<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...
- Canvas globalCompositeOperation API
参考: http://www.cnblogs.com/jenry/archive/2012/02/11/2347012.html <!DOCTYPE html> <html lang ...
- HTML 5 canvas globalCompositeOperation 属性
做一个canvas鼠标跟随动画的时候用到了,就copy w3c的解释整理一番: globalCompositeOperation 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上. 源 ...
- canvas —— globalCompositeOperation
globalCompositeOperation 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上. 源图像 = 您打算放置到画布上的绘图. 目标图像 = 您已经放置在画布上的绘图. ...
- 两个Canvas小游戏
或许连小游戏都算不上,可以叫做mini游戏. 没有任何框架或者稍微有点深度的东西,所以有js基础的或者要追求炫酷效果的可以直接ctrl+w了. 先贴出两个游戏的试玩地址: 是男人就走30步 是男人就忍 ...
- html5 canvas+js实现ps钢笔抠图
html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...
- html5 canvas画布上合成
source-over 默认.在目标图像上显示源图像. source-atop 在目标图像顶部显示源图像.源图像位于目标图像之外的部分是不可见的. source-in 在目标图像中显示源图像.只有目标 ...
- html5 canvas+js实现ps钢笔抠图(速抠图 www.sukoutu.com)
html5 canvas+js实现ps钢笔抠图(速抠图 www.sukoutu.com) 根据html5 canvas+js实现ps钢笔抠图的实现,aiaito 开发者开发了一套在线抠图工具,速抠 ...
随机推荐
- 虚拟机 Ubuntu18.04 tensorflow cpu 版本
虚拟机 Ubuntu18.04 tensorflow cpu 版本 虚拟机VMware 配置: 20G容量,可扩充 2G内存,可扩充 网络采用NAT模式 平台:win10下的Ubuntu18.04 出 ...
- Lucene 更新、删除、分页操作以及IndexWriter优化
更新操作如下: 注意:通过lukeall-1.0.0.jar 查看软件,我们可以看到,更新其实是先删除在插入, 前面我们知道索引库中有两部分的内容组成,一个是索引文件,另一个是目录文件, 目前我们更新 ...
- js的数组问题
目录: 1. 遇到的问题 2. 解决方案 3. 内部原理 4. 总结 1. 遇到的问题 前天在写js时,遇到了一个很奇怪的问题:我有两个数组变量a.b,在经过一些运算后,数组b中有一些值,然后我就把数 ...
- setInterva()调用
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 s ...
- php特级课---4、网站服务监控
php特级课---4.网站服务监控 一.总结 一句话总结:这些是架构师的知识 网络流量监控:cacti,mrtg 邮件报警系统:postfix 压力测试工具:Apache压力测试软件-ab,Mysql ...
- PIL.Image与Base64 String的互相转换
https://www.jianshu.com/p/2ff8e6f98257 PIL.Image与Base64 String的互相转换 mona_alwyn 2018.01.18 19:02* 字数 ...
- 1-22-shell脚本的基础
1.1 shell 脚本的编写规范 1.2 变量与特殊变量应用 1.3局部变量与全局变量 1.4 条件测试表达式 ------------------------------------------- ...
- Project facet Java 1.8 is not supported by target runtime Apache Tomcat v7.0.
找到项目下的“.settings”
- hdu 4679 Terrorist’s destroy 树的直径+dp
题意:给你一棵树,每条边都有值W,然后问你去掉一条边,令val = w*max(两颗新树的直径),求val最小值~ 做法,先求树的直径,然后算出直径上每个点的最长枝条长度.这样对于每一条边,假如是枝条 ...
- [转载]java获取word里面的文本
需求场景 开发的web办公系统如果需要处理大量的Word文档(比如有成千上万个文档),用户一定提出查找包含某些关键字的文档的需求,这就要求能够读取 word 中的文字内容,而忽略其中的文字样式.表格. ...