上一篇介绍了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. pyinstaller 打包生成的exe文件，在其他电脑上报错

    解决方法: 1.第一种情况,在打包的时候不要加参数-w,看一下执行exe文件后出现的报错再看下一步的行动 2.应该是需要装一个VC 2015 x64(下载地址:https://www.microsof ...

  2. 应用libjpeg提取jpeg质量因子

    http://blog.csdn.net/lzhq28/article/details/7775222 版权声明:本文为博主原创文章,未经博主允许不得转载. data = new BYTE [cinf ...

  3. webapi 版本控制

    一.问题 软件开发过程中,常常会需要变更以前的接口,添加或删除接口请求字段,接口字段校验.甚至是变更请求/返回字段名称,如果强制要求所有客户端跟着一起升级代价太大.如果接口从一开始就考虑到了版本的设计 ...

  4. CentOS 6.3编译安装LAMP环境笔记

    转载地址:http://www.jb51.net/article/54969.htm 最近抽空在虚拟机上测试成功了LAMP各个最新版本的整合编译安装,算是把之前的博文整合精简,以下内容均在CENTOS ...

  5. mspdb100.dll不见了的解决办法

    一.如果在运行某软件或编译程序时提示缺少.找不到mspdb100.dll等类似提示,将下载来的mspdb100.dll拷贝到指定目录即可 (一般是system系统目录或放到软件同级目录里面),或者重新 ...

  6. WCF用户名密码验证方式

    WCF使用用户名密码验证 服务契约 namespace WCFUserNameConstract { [ServiceContract] public interface IWcfContract { ...

  7. Apache httpd服务部署

    1. yum安装 yum install httpd yum install httpd-devel yum install httpd-manual 2. 配置 vim /etc/httpd/con ...

  8. 20145307第四次JAVA学习实验报告

    20145307实验四 Android开发基础 实验内容 基于Android Studio开发简单的 Android应用并部署测试; 了解Android组件.布局管理器的使用: 掌握Android中事 ...

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

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

  10. Metasploit安装——centos6.5

    1:安装ruby yum -y install ruby 2:根据官方文档执行,安装支持包  yum install xorg-x11-server-Xvfb -y 3:官网下载最新版的Metaspl ...