canvas 遮罩

上一篇介绍了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 遮罩的更多相关文章

2015.4.25-2015.5.1 字符串去重，比例圆设计，中奖机和canvas橡皮擦效果等
1.字符串去重,html模板取值 2.javascript正则表达式之$1...$9 3.jquery插件 4.返回上一页并刷新解决方法: <a href ="javas ...
视差滚动(Parallax Scrolling)插件补充
13. Windows Windows (github) 是一个让你用占据整个屏幕的section来构建单面网站的插件.该插件提供给你一些回调函数,当新的section出现在可视区并且并且处理快照时被 ...
canvas生成遮罩图片
首先我们知道css3中增加了不少好用.好玩的css3样式可以使用.今天我们要说到是遮罩. 它的使用方式也不复杂,和background使用方式差不多.使用mask-image就 ...
游戏的套路你知道吗？ H5 Canvas刮刮乐
玩游戏的人很多时候都会遇到翻牌子开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了其实很多时候在你点开那个 ...
CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解
一.前言 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...
纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下在线预览下载地址实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
【原】使用Xfermode正确的绘制出遮罩效果
以前写as3的时候,遮罩效果一个mask属性就搞定了,真是方便. 转到android上以后,发现要实现类似的效果,可以使用Xfermode,android一共提供了三种: AvoidXfermode; ...
Loading加载小插件,用户可以选择html格式或canvas格式，自定义loading图片，canvas色彩搭配可根据个人喜好
;(function($) { $.Loading = function(options) { //暴漏插件默认值 $.Loading.defaults = { speed: 200, //弹出层淡出 ...
Android 遮罩层效果
(用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...

随机推荐

linux 用到的命令
1. cd / 直接到服务器根目录 2. pwd 查看当前所在目录 3. ll 查看当前文件下文件列表 4.ls 查看当前文件下文件,横向排列 5.ps -ef | gre ...
laravel 环境配置
一.composer 安装 1.确定为最新版本的PHP 2.进入Composer官网下载页面,在页面最下方Manual Download区域选择需要的版本下载． 3.将下载的composer.phar ...
AVAudioSession(3)：定制 Audio Session 的 Category
本文转自:AVAudioSession(3):定制 Audio Session 的 Category | www.samirchen.com 本文内容主要来源于 Working with Catego ...
20145331 《Java程序设计》第2周学习总结
20145331<Java程序设计>第2周学习总结教材学习内容总结 3.1 类型.变量与运算符 •注释://(单行注释).//(多行注释)./ */(javadoc文档注释 )注释的内容 ...
jdbctemplate中的queryForInt方法
今天才发现,原来spring 3.2.2之后,jdbctemplate中的queryForInt已经被取消了! 看下代码: 原来是这样写的: String sql = "SELECT cou ...
Linux系统巡检项目
系统检测 1.检查系统类型 2.检查发行版本 3.检查内核版本 4.检查主机名称 5.检查是否启用SElinux 6.检测默认的语言/编码 7.检测uptime 8.检测最后启动时间等 CPU检查 1 ...
rocketmq事务消息
rocketmq事务消息参考: https://blog.csdn.net/u011686226/article/details/78106215 https://yq.aliyun.com/art ...
ETL增量处理总结
1 LOG表 1.1 思路用log表记录业务库某表yw_tableA发生变化数据的主键.数据进入BI库目标表bi_tableA前,先根据log表记录的主键进行delete. 1.2 设计 1.2.1 ...
web视频资料百度云分享
韩顺平 struts视频教程(31讲)密码:hsp789 链接:https://pan.baidu.com/s/1kSP4CFt1gpVikRaqQXkFGA 密码:kzvp 韩顺平 spring ...
分页式存储管理方式AND请求分页式存储管理
先说下什么是页(页面):就是将用户的程序的的地址空间分成固定大小的区域,称为”页“,或者”页面“ 之后将这些页离散的放进内存中,这样解决了内存的碎片问题记得老师上课说了下这两个概念不能混,现在区分下 ...

canvas 遮罩

canvas 遮罩的更多相关文章

随机推荐

热门专题