刮刮卡（图片合成）

  • 定义： 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. Python 各种进制转换

    #coding=gbk var=input("请输入十六进制数:") b=bin(int(var,16)) print(b[2:]) 详细请参考python自带int函数.bin函 ...

  2. js值类型转换(boolean/String/number),js运算符，if条件，循环结构,函数,三种弹出框

    js值类型转换 number | string | boolean boolean类型转换 num = 0; var b1 = Boolean(num); console.log(b1) 转化为数字类 ...

  3. 第九节：深究并行编程Parallel类中的三大方法 (For、ForEach、Invoke）和几大编程模型(SPM、APM、EAP、TAP）

    一. 并行编程 1. 区分串行编程和串行编程 ①. 串行编程:所谓的串行编程就是单线程的作用下,按顺序执行.(典型代表for循环 下面例子从1-100按顺序执行) ②. 并行编程:充分利用多核cpu的 ...

  4. 点评cat系列-简介

    面上有很多优秀的 OS 级监控系统 (比如 falcon), 这些监控系统主要聚焦在 CPU/IO/Mem/Disk 和应用端口, falcon 甚至可以监控到 JVM. 但对于应用系统内部的一些监控 ...

  5. [物理学与PDEs]第1章习题3 常场强下电势的定解问题

    在一场强为 ${\bf E}_0$ (${\bf E}_0$ 为常向量) 的电场中, 置入一个半径为 $R$ 的导电球体, 试导出球外电势所满足的方程及相应的定解条件. 解答: 设导电球体为 $B_R ...

  6. TPS和QPS 并发量区别；日活 访问量 活跃度

    一.系统承载吞度量 系统的吞度量(承压能力)与request对CPU的消耗.外部接口.IO等等紧密关联.单个reqeust 对CPU消耗越高,外部系统接口.IO影响速度越慢,系统吞吐能力越低,反之越高 ...

  7. git 20181119

    不同分支间(a.b分支)合并部分文件 git ck b git ck a f1 f2 git配置 配置文件 系统git config --system --list 全局git config --gl ...

  8. 【Java编程思想笔记】注解1-简单了解注解

    文章参考:https://www.cnblogs.com/xuningchuanblogs/p/7763225.html https://www.cnblogs.com/xdp-gacl/p/3622 ...

  9. Spring系列(一) Spring的核心

    Spring 简介 Spring 是一个开源轻量级企业应用架构,目的是为了简化企业级应用开发.(1)Spring 框架可以帮我们管理对象的生命周期,帮助我们管理对象间的依赖关系,相互协作:(2)Spr ...

  10. Find K Closest Elements

    Given a sorted array, two integers k and x, find the k closest elements to x in the array. The resul ...