上一篇介绍了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. SQL学习笔记之MySQL查询的三层解析

    Mysqld的三层结构: SQL类型: DDL:数据库对象定义语言 对库和表的定义 DML:操作语言 DCL:控制语言 结构化的查询语言:select * from user; 执行该语句时: 1.连 ...

  2. GIT使用—创建并使用远程版本库

    远程版本库 (1)创建一个裸版本库 [root@localhost tmp]# git init fluff2 Initialized empty Git repository in /tmp/flu ...

  3. MVc分页【关于使用扩展方法实现MVc分页】

    近期对MVc自定义分页作了一下小研究下面把他记下来 下述代1,2,3里面的代码可以直接拷贝,4以后的根据情况自己选定 1.在后台任写如下的扩展方法(任一类库都可以,但是用时得引用命名空间) // 添加 ...

  4. 20145216史婧瑶《Java程序设计》第7周学习总结

    20145216 <Java程序设计>第7周学习总结 教材学习内容总结 第十三章 时间与日期 13.1 认识时间与日期 就目前来说,即使标注为GMT(无论是文件说明,或者是API的日期时间 ...

  5. 组播的介绍以及CS模型实现

    1.组播介绍 组播组可以是永久的也可以是临时的.组播组地址中,有一部分由官方分配的,称为永久组播组. 永久组播组保持不变的是它的ip地址,组中的成员构成可以发生变化.永久组播组中成员的数量都可以是任意 ...

  6. 【读书笔记】《深入浅出nodejs》第一章 Node简介

    1. Node的官方网站: http://nodejs.org 2. Node的缘起: Ryan Dahl 打算设计一个高性能的Web服务器. Ryan Dahl 认为设计高性能Web服务器的要点在于 ...

  7. jsp判断以某个字母开头

    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ tag ...

  8. 【ML数学知识】极大似然估计

    它是建立在极大似然原理的基础上的一个统计方法,极大似然原理的直观想法是,一个随机试验如有若干个可能的结果A,B,C,... ,若在一次试验中,结果A出现了,那么可以认为实验条件对A的出现有利,也即出现 ...

  9. STL的其他用法（adjacent_find, find_first_of, sort_heap, merge, binary_search）总结

    2017-08-20 17:26:07 writer:pprp 1.adjacent_find() 下面是源码实现: template <class ForwardIterator> Fo ...

  10. HTTP-API-DESIGN 怎样设计一个合理的 HTTP API （一）

    这个附件的幻灯片是我最近给团队分享关于设计 HTTP API 的时候,结合 这篇 和我们团队历史上的一些错误,总结出来一些适合内部的经验. 简介. 这次分享主要关注以下几部分: HTTP + JSON ...