canvas的globalCompositeOperation属性
在开发过程中遇到过类似刮刮卡的效果,就是涂抹时变透明,显示出下方的内容,做法思路简单说一下问题和解决方案;
分为2层,最下面一层是内容,比如‘一等奖’,上面一层用一个canvas遮挡住,画布本来是透明的,那必须给整个画布颜色
定义和用法
globalCompositeOperation 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上。
源图像 = 您打算放置到画布上的绘图。
目标图像 = 您已经放置在画布上的绘图。
默认值: | source-over |
---|---|
JavaScript 语法: | context.globalCompositeOperation="source-in"; |
属性值
source-over | 默认。在目标图像上显示源图像。 |
source-atop | 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。 |
source-in | 在目标图像中显示源图像。只有目标图像内的源图像部分会显示,目标图像是透明的。 |
source-out | 在目标图像之外显示源图像。只会显示目标图像之外源图像部分,目标图像是透明的。 |
destination-over | 在源图像上方显示目标图像。 |
destination-atop | 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。 |
destination-in | 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示,源图像是透明的。 |
destination-out | 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的。 |
lighter | 显示源图像 + 目标图像。 |
copy | 显示源图像。忽略目标图像。 |
xor | 使用异或操作对源图像与目标图像进行组合。 |
canvas绘制能力真的很强哦
canvas的globalCompositeOperation属性的更多相关文章
- 【HTML5】Canvas之globalCompositeOperation属性详解
globalCompositeOperation即Canvas中的合成操作. 1.source-over 这是默认值,他表示绘制的图形将画在现有画布之上 <!DOCTYPE html> & ...
- HTML 5 canvas globalCompositeOperation 属性
做一个canvas鼠标跟随动画的时候用到了,就copy w3c的解释整理一番: globalCompositeOperation 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上. 源 ...
- 在html5 canvas的destination-atop属性的一些奇怪的问题
最近在整理canvas的时候发现HTML5 Canvas开发详解一个奇怪的属性解释 目标图形是显示在画布上的位图 而原图形是指要回执在画布上的形状 w3school上面是这样说的 destinatio ...
- canvas线条的属性
一.线条的帽子lineCap 取值:butt(默认值),round圆头,square方头 var canvas=document.getElementById("canvas"); ...
- canvas 的HTML属性
(一) width/height 默认值与单位 Canvas 标签只有两个属性—— width\height,作为一种替换元素,它默认大小为300×150像素. canvas的单位只能是是px,值只 ...
- [ javascript canvas toDataURL() clip() ] javascript canvas toDataURL() clip() 属性及方法演示
<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...
- 关于canvas 易忘属性
globalAlpha=1//表示全局的一个透明度值 默认值是1 globalCompositeOperation // 默认值="source-over"(Default)
- Canvas学习:globalCompositeOperation详解
在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之上,那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面. 简单点讲,在Canvas中,把图像源和目标图像,通过Ca ...
- WEB烟花效果——Canvas实现
摘要 本文主要介绍一种WEB形式的烟花(fireworks)效果(图1所示),该效果基于Canvas实现,巧妙地运用了canvas绘图的特性,并加入了物理力作用的模拟,使整体效果非常绚丽 ...
随机推荐
- TensorFlow入门实操课程第一章教程笔记
神经元网络深度学习的起步程序 Hello World 第一个应用程序总是应该从超级简单的东西开始,这样可以看到代码如何产生和运作的整体框架. 就创建神经网络而言,我喜欢使用的例子是一个能够学习两组数字 ...
- 【模拟7.14】建造游乐园(play)
这题是玄学的数论 首先考虑如何枚举偶数点度的图 可以考虑取出i-1个点 那么成图的数量为2^C(i-1,2) (原因单独取出的i点能平衡已建图中的奇数点,原因是某种性质....) 然后求带联通标号的欧 ...
- Linux shell是什么
shell概念: shell是一个命令行解释器,它为用户提供了一个向Linux内核发送请求以便运行程序的界面系统级程序,用户可以用shell启动,挂起,停止甚至编写一些程序. shell还是一个功能强 ...
- DOS命令行(3)——Windows运行窗口打开特定功能
cmd 开启命令解释权或启用Windows中的某程序 cmd /c 执行完命令后关闭命令窗口 cmd /k 执行完命令后不关闭命令窗口 winver 查看Windows版本信息版权信息授权信息 ...
- Go语言十进制转二进制字符串
Go语言十进制转二进制字符串 代码Demo func Test_2(t *testing.T) { // 方法一 fmt.Println(DecToBin(5)) // 方法二:导入包"gi ...
- qemu-ga windows下的安装及监控开发
windows安装qemu-ga 虚拟机配置里添加virtio serial端口 #virsh edit instance-name devices里添加下面这段配置, 1 <channel t ...
- Docker安装运行Portainer
基本简介 Portainer是一个轻量级的docker环境管理UI,可以用来管理docker宿主机和docker swarm集群.他的轻量级,轻量到只要个不到100M的docker镜像容器就可以完整的 ...
- 关于LCA的几点想法
倍增 这是最最最常见的写法了,一个fa[N][logN]的数组直接搞定 时间复杂度也不算太高 预处理 $ O(nlogn) $ 如果你想卡的话,可以卡到 $ O(nlogh) $ h为树的深度 查询 ...
- 21、nginx之ngx_http_proxy_module模块
Nginx 的代理功能是通过 ngx_http_proxy_module 模块来实现的.默认在安装 Nginx 时已经安装了ngx_http_proxy_module模 块,因此可直接使用 ngx_h ...
- 12、elk的使用(1)
12.0.架构图: 服务器名称 ip地址 controller-node1(主) 172.16.1.90 slave-node1(从) 172.16.1.91 12.1.elk介绍: (1)ELK是三 ...