上一篇介绍了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. firewall 防火墙相关

    修改配置文件: /etc/sysconfig/network-scripts/ifcfg-ens33 文件 ONBOOT=no 改为yes 然后重启  service network restart ...

  2. ABP官方文档翻译 2.1 依赖注入

    依赖注入 什么是依赖注入 传统方式的问题 解决方案 构造函数注入模式 属性注入模式 依赖注入框架 ABP依赖注入基础设施 注册依赖注入 传统注册 帮助接口 自定义/直接注册 使用IocManager ...

  3. java 2017/6/26杂记

    mkdirs()可以建立多级文件夹, mkdir()只会建立一级的文件夹, 如下: new File("/tmp/one/two/three").mkdirs(); 执行后, 会建 ...

  4. centos6.9 升级glibc(升级到 2.17版)

    原系统centos6.9自带GLIBC_2.12,安装一些软体提示版本不对,决定升级. wget http://ftp.gnu.org/gnu/glibc/glibc-2.17.tar.gz tar ...

  5. [简明版] 有道云笔记Markdown指南

    使用有道词典配合Markdown,可以快速准确做出美观精致的笔记,下面我们来看一下如何使用有道词典的MarkDown功能. 什么是Markdown?Markdown是一种轻量级的「标记语言」,通常为程 ...

  6. SeekArc

    https://github.com/neild001/SeekArc https://github.com/imflyn/SeekArc

  7. Zabbix 关联onealert实现电话报警

    Zabbix 关联onealert实现电话报警 系统环境:Linux Centos 7.4 应用版本:Zabbix 3.0.22 OneAlert官方地址:http://www.onealert.co ...

  8. SQL Server 对XML数据类型的SQL语句总结

    --创建XMLTable , ) primary key, XMLCol xml); go ------------------------------------------------------ ...

  9. swoole 异步队列简明教程

    安装步骤如下(推荐把安装文件下载到 /usr/local/src 目录下): step 1: wget --no-check-certificate https://github.com/swoole ...

  10. Linux基础知识点

    1.目录结构 bin 存放二进制可执行文件(ls,cat,mkdir等) boot 存放用于系统引导时使用的各种文件 dev 用于存放设备文件 etc 存放系统配置文件 home 存放所有用户文件的根 ...