刮刮卡（图片合成）

  • 定义： 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. Linux性能优化实战：到底应该怎样理解平均负载（02）

    一.平均负载与CPU使用率并没有直接关系 1.平均负载 单位时间内,系统处于可运行状态和不可终端状态的平均进程数也就是平均活跃进程数,它和cpu使用率并没有直接关系, 可运行状态: 正在使用的cpu或 ...

  2. 优秀的电商平台Jshop栗子

    摘录自:https://blog.csdn.net/chenjun9205/article/details/52412503 下载源代码 git clone https://git.oschina.n ...

  3. 轴对称 Navier-Stokes 方程组的点态正则性准则 II

    在 [Wei, Dongyi. Regularity criterion to the axially symmetric Navier-Stokes equations. J. Math. Anal ...

  4. RC522射频卡读写模块驱动（仅读取）

    目录 说明 测试结果 main RC522.h RC522.c 说明 更改了网上的源代码,仅保留了读取序列号并通过串口回传的功能.版本号:V1 感谢 https://blog.csdn.net/qq_ ...

  5. spring事务源码分析结合mybatis源码(二)

    让我们继续上篇,分析下如果有第二个调用进入的过程. 代码部分主要是下面这个: if (isExistingTransaction(transaction)) { return handleExisti ...

  6. MySQL问题汇总

    1.中文乱码 连接设置: 数据库设置:

  7. 【原创】大叔问题定位分享（11）Spark中对大表子查询加limit为什么会报Broadcast超时错误

    当两个表需要join时,如果一个是大表,一个是小表,正常的map-reduce流程需要shuffle,这会导致大表数据在节点间网络传输,常见的优化方式是将小表读到内存中并广播到大表处理,避免shuff ...

  8. 如何查询oracle数据库中的各种角色

    1. 查询oracle中所有用户信息select * from dba_users;2. 只查询用户和密码select username,password from dba_users;3. 查询当前 ...

  9. springboot集成mybatis源码分析（一）

    本篇文章只是简单接受使用,具体源码解析请看后续文章 1.新建springboot项目,并导入mybatis的pom配置 配置数据库驱动和mybatis dependency <dependenc ...

  10. docker部署项目 <三>

    使用docker运行一个控制台项目,新建一个控制台测试项目 一.安装mono,直接在网易镜像中心找下载路径 docker pull hub.c..com/library/mono:latest 二.安 ...