刮刮卡（图片合成）

  • 定义： globalCompositeOperation 属性，设置或返回如何将源图像

将 myCanvas 的背景图设置为一张图片，（刮开后显示）

// 目标图像（已有的，外面一层即将被刮掉的那一图像）

pen.beginPath();

pen.fillStyle = "red";

pen.fillRect(100, 300, 100, 100);

// pen.globalCompositeOperation = "source-over";    / / 默认值，可以理解为 目标图像 层级高于 源图像

// pen.globalCompositeOperation = "source-atop";    // 目标图像以外 的 源图像 是透明的

// pen.globalCompositeOperation = "source-in";    // 只有目标图像以内的源图像显示，其他部分图像是透明的

// pen.globalCompositeOperation = "source-out";    // 只有目标图像以外的源图像显示，其他部分图像是透明的

// pen.globalCompositeOperation = "destination-over";    // 默认值，可以理解为 源图像 层级高于 目标图像

// pen.globalCompositeOperation = "destination-atop";    // 源图像以外的 目标图像 是透明的

// pen.globalCompositeOperation = "destination-in";         // 只有源图像以内的目标图像显示，其他部分图像是透明的

pen.globalCompositeOperation = "destination-out";       // 只有源图像以外的目标图像显示，其他部分图像是透明的

// 源图像（刮刮卡必须设置透明色，才能看见 myCanvas 的背景图）

pen.beginPath();

pen.fillStyle = "blue";

pen.fillRect(300, 300, 100, 100);

  • <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8" />
    
        <title>刮刮卡案例</title>

        <style type="text/css">
    
            body {
    
                width: 100%;
    
                color: #000;
    
                background: #96b377;
    
                font: 14px Helvetica, Arial, sans-serif;
    
            }

            #wrap {
    
                display: flex;
    
                flex-direction: column;
    
                justify-content: center;
    
                align-items: center;
    
            }
    
        </style>
    
    </head>

    <body>

        <div id="wrap"></div>

        <!-- javascript 代码 -->
    
        <script type="text/javascript">
    
            //                创建 画布的width  画布的height  背景颜色 父元素
    
            function createCanvasTo(canvasWidth, canvasHeight, bgColor, parentObj){
    
                var myCanvas = document.createElement("canvas");
    
                myCanvas.width = canvasWidth;
    
                myCanvas.height = canvasHeight;
    
                myCanvas.innerText = " 您的浏览器不支持 canvas，建议更新或者更换浏览器。";
    
                if(bgColor){
    
                    myCanvas.style.backgroundColor = bgColor;
    
                };
    
                if(parentObj){
    
                    parentObj.appendChild(myCanvas);
    
                };

                return myCanvas;
    
            };

            /**** Start Coding ****/
    
            var wrap = document.getElementById("wrap");
    
            var myCanvas = createCanvasTo(400, 400, "#eee", wrap);
    
            myCanvas.style.backgroundImage = "url(./img/Loki.jpg)";
    
            myCanvas.style.backgroundSize = "cover";

            // 获取画笔
    
            var pen = myCanvas.getContext("2d");
    
            pen.fillStyle = '#a0a997';    // 填充的颜色
    
            pen.strokeStyle = "blue";    //  笔的颜色
    
            pen.lineWidth = 40;    // 笔宽
    
            pen.lineCap = "round";    // 圆形结束
    
            pen.lineJoin = "round";    // 圆角

            // 开始绘制
    
            pen.beginPath();
    
            pen.fillRect(0, 0, myCanvas.width, myCanvas.height);

            pen.globalCompositeOperation = "destination-out";       // 只有源图像以外的目标图像显示，其他部分图像是透明的

            myCanvas.onmousedown = function(e){
    
                e = e || window.event;

                myCanvas.setCapture && myCanvas.setCapture();

                var canvasX = myCanvas.getBoundingClientRect().left;
    
                var canvasY = myCanvas.getBoundingClientRect().top;

                pen.beginPath();
    
                pen.moveTo(e.clientX-canvasX, e.clientY-canvasY);

                myCanvas.onmousemove = function(e){
    
                    e = e || window.event;

                    pen.lineTo(e.clientX-canvasX, e.clientY-canvasY);
    
                    pen.stroke();
    
                };

                myCanvas.onmouseup = function(){

                    myCanvas.onmousemove = null;
    
                    myCanvas.onmouseup = null;
    
                    myCanvas.clearCapture && myCanvas.clearCapture();
    
                };

                e.preventDefault && e.preventDefault();
    
                return false;
    
            };
    
        </script>
    
    </body>
    
</html>

HTML5_图片合成_刮刮卡的更多相关文章

  1. 网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践

    前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜 ...

  2. Html5实现移动端、PC端 刮刮卡效果

    刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛 ...

  3. 用BlendFunc实现舞台灯光和刮刮卡效果

    [转]http://code.lovemiao.com/?p=136#more-136 之前写过一篇<不规则形状按钮的点击判定>,利用了CCRenderTexture创建一块画布,可以在上 ...

  4. 用c#开发微信 (16) 微活动 2 刮刮卡

    微信营销是一种新型的营销模式,由于微信更重视用户之间的互动,故而这种营销推广不不能盲目地套用微博营销的单纯大量广告推送方式.这种方式在微信营销中的效果非常差,会令用户反感,继而取消去企业或商家的微信公 ...

  5. Atitit .html5刮刮卡的gui实现总结

    Atitit .html5刮刮卡的gui实现总结 #----两个案例canvas或者wScratchPad-1.4.4 1 #----1.添加panel  ,这个十mask div.....posti ...

  6. 使用HTML5实现刮刮卡效果

    你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5 ...

  7. Android 自定义View修炼-【2014年最后的分享啦】Android实现自定义刮刮卡效果View

    一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文& ...

  8. Android刮刮卡自定义控件

    网上的都是自己绘制的或者图片,我的需求是可以随意的自定义底部和顶部的布局.所以自己重写一个,原理就是直接继承 View 来实现一个刮层,让这个刮层和图片以及文字不产生任何依赖,再结合 FrameLay ...

  9. Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 很久以前也过一个html5的刮刮卡 ...

随机推荐

  1. [JDK8]读写锁的改进:StampedLock

    StampedLock是Java8引入的一种新的锁机制,简单的理解,可以认为它是读写锁的一个改进版本,读写锁虽然分离了读和写的功能,使得读与读之间可以完全并发,但是读和写之间依然是冲突的,读锁会完全阻 ...

  2. Ubuntu16下Hadoop安装

    1. 安装Ubuntu 2. 新装Ubuntu常用软件安装和系统设置 (1) 安装vim yum install vim (2) 更改hostname为hadoop_master sudo vim / ...

  3. Git Gerrit使用

    Git Gerrit 操作都用 git bash操作: 如果想用 cmd 或者 PowerShell,系统环境变量 Path 添加 Git 安装路径,如: C:\Program Files (x86) ...

  4. MySQL无法插入中文的解决方案

    本人在做数据库的连接过程中,发现无法插入中文值.原因是mysql的默认编码是latin1,只须将编码改为utf8即可. 在mysql的命令行窗口中输入 status 会出现当前的编码.在mysql的安 ...

  5. Elasticsearch High Level Rest Client 发起请求的过程分析

    本文讨论的是JAVA High Level Rest Client向ElasticSearch6.3.2发送请求(index操作.update.delete--)的一个详细过程的理解,主要涉及到Res ...

  6. Blender 快捷键笔记

    A Select All/Unselect All shift+A Create Z 切换wireframe和solid mode TAB Start or quit EditMode B Activ ...

  7. Python“函数式编程”中常用的函数

    1.map(func,seq[,seq,...]) 对序列中的每个元素应用函数,python2中map()返回的是列表,python3中返回的是迭代器,可以用list()转换成列表.以下例子为pyth ...

  8. CF1153D Serval and Rooted Tree（树形DP）

      题目链接: https://www.luogu.org/problemnew/show/CF1153D (cf崩了,贴了个落谷的) 题目大意:给你n个点,然后n-1条边,构成一棵树,每个点是子节点 ...

  9. xheditor编辑器上传图片

    之前在用csdn的时候,觉得他们家的编辑器挺好用,精美,简洁,大方,功能强大.最近自己的项目也要用到编辑器,我就想起了xheditor. 好多大网站都用到它~好棒! 我把xheditor用于文章模块, ...

  10. formData 对象 与 Content-Type 类型

    FormData FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用.如 ...