上一篇介绍了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. vi在行首插入注释符号#

    1.ctrl+v 2.上下键选中要插入的位置 3.按下shift+i,接着输入#符号 4.按键ESC(稍等一下,就会自动插入了)

  2. Caffe学习笔记（三）：Caffe数据是如何输入和输出的？

    Caffe学习笔记(三):Caffe数据是如何输入和输出的? Caffe中的数据流以Blobs进行传输,在<Caffe学习笔记(一):Caffe架构及其模型解析>中已经对Blobs进行了简 ...

  3. RabbitMQ Network Partitions

    Clustering and Network Partitions RabbitMQ clusters do not tolerate network partitions well. If you ...

  4. Basic Authentication in ASP.NET Web API

    Basic authentication is defined in RFC 2617, HTTP Authentication: Basic and Digest Access Authentica ...

  5. web服务器安全笔记

    一.设置项目目录权限(centos ,apache为例) 1.chown -R root /var/www/html/project   (设置项目所属的用户) 2.chgrp  -R root /v ...

  6. 【Detection】R-FCN: Object Detection via Region-based Fully Convolutional Networks论文分析

    目录 0. Paper link 1. Overview 2. position-sensitive score maps 2.1 Background 2.2 position-sensitive ...

  7. UVa 10765 鸽子和炸弹（割点）

    https://vjudge.net/problem/UVA-10765 题意: 给一个n个点的无向图,求每个点删去后形成的连通分量数. 思路: 判断割点,如果是割点的话,在dfs的时候计算出删去它后 ...

  8. GEO--工具 ScanGEO

    http://scangeo.dartmouth.edu/ScanGEO/ ScanGEO - parallel mining of high-throughput gene expression d ...

  9. Centos 查看端口占用情况

    netstat -ntlp 把相应PID kill掉即可

  10. Linux系统用户及用户组管理

    目录一.新增/删除用户和用户组二.创建/修改密码三.用户身份切换--su和sudo 一.新增/删除用户和用户组1.用户组 命令 : groupadd 语法 : groupadd [-g GID] gr ...