上一篇介绍了CSS3可以实现mask的方式,本篇介绍canvas同样也可以实现遮罩的方法:

原理:

canvas是在画布上绘图,可以绘制各种形状,同时可以在一个层上重复画图,默认情况下后面的会覆盖前面的图,但是有一个属性可以设置多个图重复时的显示规则,就如同css3中的-webkit-mask-composite一样,canvas有一个属性叫globalCompositeOperation,他可以有以下取值:

source-over(默认值):在原有图形上绘制新图形

destination-over:在原有图形下绘制新图形

source-in:显示原有图形和新图形的交集,新图形在上,所以颜色为新图形的颜色

destination-in:显示原有图形和新图形的交集,原有图形在上,所以颜色为原有图形的颜色

source-out:只显示新图形非交集部分

destination-out:只显示原有图形非交集部分

source-atop:显示原有图形和交集部分,新图形在上,所以交集部分的颜色为新图形的颜色

destination-atop:显示新图形和交集部分,新图形在下,所以交集部分的颜色为原有图形的颜色

lighter:原有图形和新图形都显示,交集部分做颜色叠加

xor:重叠飞部分不现实

copy:只显示新图形

此前有张图可以看出区别:

为了实现遮罩,我们使用的值是 destination-out:只显示原有图形非交集部分,这样两层图形非交集部分的源图形将会显示,也就是第一层图形(源图形),而两者交集部分将不显示,也就是变成透明,这样背景图就会显示出来。

具体的区别可以通过以下的例子查看:

<!DOCTYPE html>
<html>
<head>
<title>简单的mask</title>
<style type='text/css'>
#main_div{
width:300px;
height:300px;
background-color:silver;
}
#tips{
margin-top:10px;
font-size:13px;
}
#tenpay_txt{
width:879px;
height:234px;
margin-top:50px;
border:solid 1px silver;
background:url('back.jpg') no-repeat;
}
</style>
</head>
<body>
<div id="main_div"></div>
<div id="buttons">
<input type='button' id="showCanvas1" value="绘制目标层" onclick="showCanvas1()"></input>
<select id="select_type">
<option value="source-over">source-over</option>
<option value="destination-over">destination-over</option>
<option value="source-in">source-in</option>
<option value="source-out">source-out</option>
<option value="destination-out">destination-out</option>
<option value="source-atop">source-atop</option>
<option value="destination-atop">destination-atop</option>
<option value="lighter">lighter</option>
<option value="xor">xor</option>
<option value="copy">copy</option>
</select>
<input type='button' id="showCanvas2" value="绘制源层" onclick="showCanvas2()"></input>
<input type='button' id="showCanvas2" value="清空区域" onclick="clearCanvas()"></input>
</div>
<div id="tips">
红色为源图形,白色为目标图形
</div> <script type="text/javascript">
var main_div = document.getElementById("main_div");
var canvas_s=document.createElement("canvas");
canvas_s.width=300;
canvas_s.height=300;
main_div.appendChild(canvas_s);
canvas_s.style.position="absolute";
var c_context = canvas_s.getContext("2d"); function showCanvas1(){
c_context.fillStyle = "white";
c_context.fillRect(50,50,200,200);
}
function showCanvas2(){
var type = document.getElementById("select_type").value;
c_context.globalCompositeOperation=type;
c_context.fillStyle = "red";
c_context.fillRect(75,75,150,150);
}
function clearCanvas(){
c_context.clearRect(0,0,300,300);
}
</script> <div id="tenpay_txt">
</div> <script type="text/javascript">
var tenpay_txt = document.getElementById("tenpay_txt");
var canvas = document.createElement("canvas");
canvas.width=879;
canvas.height=234;
tenpay_txt.appendChild(canvas);
canvas.style.position="absolute";
var context = canvas.getContext("2d");
var left_start = 100;
var left_right = 780;
var left_now = left_start;
var left_step = 5;
var direction = 1;
setInterval(drawMask,30); function drawMask()
{
if(direction == -1 && left_now == left_start){
direction = 1;
}
if(direction ==1 && left_now > left_right){
direction = -1;
}
left_now += left_step*direction; context.clearRect(0,0,canvas.width,canvas.height);
context.globalCompositeOperation="source-over";
context.fillRect(0,0,canvas.width,canvas.height);
context.globalCompositeOperation="destination-out";
context.beginPath();
context.arc(left_now,130,100,0,Math.PI*2,true);
context.fill();
} </script>
</body>
</html>

通过这种方法可以实现各种遮罩,包括刮刮卡等效果,具体可以自己动手试验下,不算复杂。

/// use save when using clip Path
ctx2.save(); ctx2.beginPath();
ctx2.moveTo(0, 20);
ctx2.lineTo(50,0);
/// ... more here - see demo
ctx2.lineTo(400, 20);
ctx2.lineTo(400, 100);
ctx2.lineTo(0, 100);
ctx2.closePath(); /// define this Path as clipping mask
ctx2.clip();
// Create an image element
var img = document.createElement('IMG');
 
// When the image is loaded, draw it
img.onload = function () {
 
// Save the state, so we can undo the clipping
ctx.save();
 
// Create a shape, of some sort
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 30);
ctx.lineTo(180, 10);
ctx.lineTo(200, 60);
ctx.arcTo(180, 70, 120, 0, 10);
ctx.lineTo(200, 180);
ctx.lineTo(100, 150);
ctx.lineTo(70, 180);
ctx.lineTo(20, 130);
ctx.lineTo(50, 70);
ctx.closePath();
// Clip to the current path
ctx.clip();
 
ctx.drawImage(img, 0, 0);
 
// Undo the clipping
ctx.restore();
}
 
// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";
/// draw the image ctx2.drawImage(img, 0, 0); /// reset clip to default ctx2.restore();

http://jsfiddle.net/jimrhoskins/dDUC3/1/

canvas 遮罩的更多相关文章

  1. 2015.4.25-2015.5.1 字符串去重,比例圆设计,中奖机和canvas橡皮擦效果等

    1.字符串去重,html模板取值   2.javascript正则表达式之$1...$9   3.jquery插件   4.返回上一页并刷新 解决方法: <a href ="javas ...

  2. 视差滚动(Parallax Scrolling)插件补充

    13. Windows Windows (github) 是一个让你用占据整个屏幕的section来构建单面网站的插件.该插件提供给你一些回调函数,当新的section出现在可视区并且并且处理快照时被 ...

  3. canvas生成遮罩图片

         首先我们知道css3中增加了不少好用.好玩的css3样式可以使用.今天我们要说到是遮罩.        它的使用方式也不复杂,和background使用方式差不多.使用mask-image就 ...

  4. 游戏的套路你知道吗? H5 Canvas刮刮乐

    玩游戏的人 很多时候都会遇到翻牌子  开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结  指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了  其实很多时候在你点开那个 ...

  5. CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  6. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  7. 【原】使用Xfermode正确的绘制出遮罩效果

    以前写as3的时候,遮罩效果一个mask属性就搞定了,真是方便. 转到android上以后,发现要实现类似的效果,可以使用Xfermode,android一共提供了三种: AvoidXfermode; ...

  8. Loading加载小插件,用户可以选择html格式或canvas格式,自定义loading图片,canvas色彩搭配可根据个人喜好

    ;(function($) { $.Loading = function(options) { //暴漏插件默认值 $.Loading.defaults = { speed: 200, //弹出层淡出 ...

  9. Android 遮罩层效果

    (用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...

随机推荐

  1. SpringBoot入门学习(二)

    第一讲我们已经讲解了入门Demo,这一讲我们主要讲解包含以下内容 项目内一些属性配置 自定义属性配置 ConfigurationProperties配置 (1)第一个工程创建的时候会自动在工程下创建a ...

  2. 新linux系统上rz 与sz命令不可用

    使用命令进行安装:yum install lrzsz  即可使用

  3. IP查找所属网段

    最近同学接到阿里面试题 package io.guangsoft.analysis; /* 数据文件: 1.1.1.0/24,123 1.1.2.0/28,345 1.2.0.0/16,789 */ ...

  4. 20145307第三次JAVA学习实验报告

    20145307 <Java程序设计>第三次实验报告 北京电子科技学院(BESTI)实验报告 课程:Java程序设计 班级:1453 指导教师:娄嘉鹏 实验日期:2016.04.22 实验 ...

  5. HandyJSON第三方库的日常使用与错误记录

    一.错误提示 1.更新Xcode10.2,Swift5.0出现错误提示 Undefined symbols for architecture x86_64: "_swift_getField ...

  6. 谈谈let与const

    let 命令 let命令用于声明变量,但是与传统var命令的不同之处在于拥有以下特性: 使用let命令声明的变量只在let命令所在的代码块内有效(我将之称为变量绑定): 不存在变量提升: 存在暂时性死 ...

  7. MR案例:MR和Hive中使用Lzo压缩

    在MapReduce中使用lzo压缩 1).首先将数据文件在本地使用lzop命令压缩.具体配置过详见配置hadoop集群的lzo压缩 //压缩lzop,解压缩lzop -d [root@ncst wo ...

  8. 配置Gitlab Push自动触发jenkins构建

    一. 下载gitlab plugin Jenkins>插件管理 下载并安装gitlab plugin 二. 配置gitlab认证 路径Jenkins>Credentials>Syst ...

  9. 阿里云 yum 源

    1.备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 2.下载新的CentOS-Base ...

  10. mybatis的一级缓存和二级缓存(1)

    1.mybatis一级缓存,sqlSesion级别的缓存,一级缓存默认一直开启的,sqlSession级别的一个Map,把查询的数据放到一个Map中,以后需要相同的数据,直接从Map中去取 与数据库一 ...