上一篇介绍了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. java红黑树

    从这里学了一些知识点https://blog.csdn.net/sun_tttt/article/details/65445754,感谢作者

  2. java中的重量级与轻量级概念

    首先轻量级与重量级是一个相对的概念,主要是对应用框架使用方便性和所提供服务特性等方面做比较的. 比方说EJB就是一个重量级的框架,因为它对所编写的代码有限制,同时它也提供分布式等复杂的功能. 相比之下 ...

  3. redis 简单命令操作

    一.概述: 在该系列的前几篇博客中,主要讲述的是与Redis数据类型相关的命令,如String.List.Set.Hashes和Sorted-Set.这些命令都具有一个共同点,即所有的操作都是针对与K ...

  4. C/C++之Qt正则表达式

    引言 正则表达式(regular expression)就是用一个“字符串”来描述一个特征,然后去验证另一个“字符串”是否符合这个特征.比如 表达式“ab+” 描述的特征是“一个 'a' 和 任意个  ...

  5. NOIP2019前的训练记录

    \(April\):肛多项式,学\(FWT\)一个小时无果后背了六个公式,看来证明又得咕很久了

  6. 20145322《Java程序设计》第5次实验报告

    20145322<Java程序设计>第5次实验报告 实验内容 1.根据所学内容,编写代码实现服务器与客户端 2.掌握密码技术的使用 3.设计安全传输系统,客户端中输入明文,利用DES算法加 ...

  7. 关于Bonobo Git Server的安装

    1.关于安装 参考官网:https://bonobogitserver.com/ 实际上就是在IIS上搭建一个MVC程序.安装教程:https://bonobogitserver.com/instal ...

  8. tsar的使用

    项目地址https://github.com/alibaba/tsar 安装 $ git clone git://github.com/kongjian/tsar.git $ cd tsar $ ma ...

  9. hadoop 编译任意版本的eclipse 插件

    github地址 下载ant并进行配置 http://ant.apache.org/bindownload.cgi 解压后, sudo gedit /etc/profile 进行设置: 添加expor ...

  10. deepin下用命令管理自己的Github仓库

    用命令链接github 初始化 需要用ssh公钥链接到github,注意不能从vim中直接复制 介绍一个命令: xsel < test.txt 将文件中内容直接复制到剪切板中 具体做法 git ...