刮刮卡（图片合成）

  • 定义： 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. mysql/mariadb主从复制

    主从复制简介 MySQL数据库的主从复制方案,是其自带的功能,并且主从复制并不是复制磁盘上的数据库文件,而是通过binlog日志复制到需要同步的从服务器上. MySQL数据库支持单向.双向.链式级联, ...

  2. JGUI源码：鼠标中键滚动再次优化(5)

    //电脑端中键滚动事件 var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : ...

  3. VS Code中编写C

    Visual Studio Code如何编写运行C.C++? Visual Studio Code的C/C++扩展功能 vscode配置C/C++的编译调试环境

  4. 边框回归（bounding-Box regression）

    转自:https://blog.csdn.net/zijin0802034/article/details/77685438 为什么要边框回归? 什么是边框回归? 边框回归怎么做的? 边框回归为什么宽 ...

  5. CCPC-Wannafly Winter Camp Day5 (Div2, onsite) Sorting(线段树)

    题目链接 题意 对序列进行三种操作: 1.区间求和. 2.将区间小于等于$x$的数不改变相对顺序的前提下放到$x$左边,用同样规则将比$x$大的放到右边. 3.将区间大于$x$的数不改变相对顺序的前提 ...

  6. github及git使用

    一.github及git Github用于托管和协作项目的网站,git是通常与github一起使用的版本控制系统.Github上有上百万个开源项目,在使用git的时候每个开发人员都在他们的计算机上有一 ...

  7. es6编程建议和技巧点汇总

    大括号 特点:大括号(单独的大括号或者if等后的大括号)内是一个单独的作用域 注意点:在块级作用域内声明的函数,类似var,会被提升到大括号外,应避免在块级作用域内声明函数.如果确实需要,写成函数表达 ...

  8. Mysql中设置指定IP的特定用户及特定权限

    创建用户:格式:grant select on 数据库.* to 用户名@登录主机 identified by '密码' 举例: 例 1:增加一个用户 test1 密码为 abc,让他可以在任何主机上 ...

  9. 肺结节CT影像特征提取（二）——肺结节CT图像特征提取算法描述

    摘自本人毕业论文<肺结节CT影像特征提取算法研究> 医学图像特征提取可以认为是基于图像内容提取必要特征,医学图像中需要什么特征基于研究需要,提取合适的特征.相对来说,医学图像特征提取要求更 ...

  10. Lua中的一些库（2）

    [前言] 在<Lua中的一些库(1)>这篇文章中,总结了一部分Lua中的库函数,一篇文章肯定是总结不完的,所以,就来一个<Lua中的一些库(2)>.希望大家能忍住.来吧. 操作 ...