刮刮卡（图片合成）
- 定义： 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_图片合成_刮刮卡的更多相关文章
-
网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践
前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜 ...
-
Html5实现移动端、PC端 刮刮卡效果
刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛 ...
-
用BlendFunc实现舞台灯光和刮刮卡效果
[转]http://code.lovemiao.com/?p=136#more-136 之前写过一篇<不规则形状按钮的点击判定>,利用了CCRenderTexture创建一块画布,可以在上 ...
-
用c#开发微信 (16) 微活动 2 刮刮卡
微信营销是一种新型的营销模式,由于微信更重视用户之间的互动,故而这种营销推广不不能盲目地套用微博营销的单纯大量广告推送方式.这种方式在微信营销中的效果非常差,会令用户反感,继而取消去企业或商家的微信公 ...
-
Atitit .html5刮刮卡的gui实现总结
Atitit .html5刮刮卡的gui实现总结 #----两个案例canvas或者wScratchPad-1.4.4 1 #----1.添加panel ,这个十mask div.....posti ...
-
使用HTML5实现刮刮卡效果
你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5 ...
-
Android 自定义View修炼-【2014年最后的分享啦】Android实现自定义刮刮卡效果View
一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文& ...
-
Android刮刮卡自定义控件
网上的都是自己绘制的或者图片,我的需求是可以随意的自定义底部和顶部的布局.所以自己重写一个,原理就是直接继承 View 来实现一个刮层,让这个刮层和图片以及文字不产生任何依赖,再结合 FrameLay ...
-
Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 很久以前也过一个html5的刮刮卡 ...
随机推荐
-
gradle各版本下载地址
gradle各版本下载地址:http://services.gradle.org/distributions 以前都是手动下载gradle的文件,然后修改的,今天想从一些博客网站上下载最新的gradl ...
-
Unity3D 装备系统学习Inventory Pro 2.1.2 总结
前言 写在最前面,本文未必适合纯新手,但有一些C#开发经验的还是可以看懂的,虽然本人也是一位Unity3D新人,但是本文只是自己在学习Inventory Pro的学习总结,而不是教程,本人觉得要读懂理 ...
-
centos下 redis安装配置及简单测试
1:安装redis(使用的的环境是centos6.7 redis-2.6.14) 将redis-2.6.14.tar.gz文件拷贝到/usr/local/src 目录下 解压文件 tar zxvf ...
-
ios开发证书，描述文件，bundle ID的关系
苹果为了控制应用的开发与发布流程,制定了一套非常复杂的机制.这里面的关键词有:个人开发者账号,企业开发者账号,bundle ID,开发证书,发布证书(又叫"生产证书"),开发描述文 ...
-
pycharm中的快捷键和简单设置
PyCharm3.x默认快捷键 PyCharm Default Keymap 1.编辑(Editing) Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Sp ...
-
mpvue学习笔记（二）
六.mpvue入门 http://mpvue.com/ 1.安装 $ vue init mpvue/mpvue-quickstart my-project$ cd my-project$ npm in ...
-
[转]使用Runtime.getRuntime().exec()方法的几个陷阱
Process 子类的一个实例,该实例可用来控制进程并获得相关信息.Process 类提供了执行从进程输入.执行输出到进程.等待进程完成.检查进程的退出状态以及销毁(杀掉)进程的方法. 创建进程的方法 ...
-
MVP框架模式
一.基本概念 MVP是Model-View-Presenter的简称,即模型-视图-表现层的缩写.MVP是由MVC模式进化而来的,MVP改进了MVC中的控制器过于臃肿的问题.与MVC一样,MVP将应用 ...
-
Mybatis整合Spring -- typeAliasesPackage
Mybatis整合Spring 根据官方的说法,在ibatis3,也就是Mybatis3问世之前,Spring3的开发工作就已经完成了,所以Spring3中还是没有对Mybatis3的支持. 因此由M ...
-
JAVA List集合转Page（分页对象）
/** * @version 1.0 * @author: fwjia */ import java.util.List; public class PageModel<T> { /*** ...