<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="刮奖">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body{margin: 0;}
#price{width: 200px; height: 100px; font-size: 40px; color: #f60; line-height: 100px; text-align: center;}
#canvas{position: absolute; top: 0; left: 0;}
</style>
</head>

<body>

<div id="price">DFAFAFAFFAF</div>
<canvas id="canvas" width="200" height="100"></canvas>
<script type="text/javascript">
var can = document.getElementById('canvas');
var touchRadius = 5;
ctx = can.getContext('2d');
ctx.fillStyle = '#ccc';
ctx.fillRect(0,0,200,100);
var img = new Image();
img.src = '1.jpg'
img.onload = function(){
ctx.drawImage(img,0,0)
}
var fillCircle = function(x,y,radius,fillColor){
this.fillStyle = fillColor || '#eee';
this.beginPath();
this.moveTo(x,y);
this.arc(x,y,radius,0,Math.PI *2,false);
this.fill();
}
var getBaifenbi = function(ctx,width,height){

var imgData = ctx.getImageData(0,0,width,height);
pix = imgData.data;
var str = [];
for(var i = 0;i<pix.length;i+=4){
var a = pix[i+3];
if(a===0){
str.push(i);
}

}
return (str.length/(pix.length/4)*100).toFixed(2);
}
var device = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase());
var clickName = device ? 'touchstart' : 'mousedown';
var moveName = device ? 'touchmove' : 'mousemove';
if(!device){
var isMouseDown = false;
document.addEventListener('mouseup',function(e){
isMouseDown = false;
},false)
}else{
document.addEventListener('touchmove',function(e){
if(isMouseDown){
e.preventDefault();
}
},false)
document.addEventListener('touchend',function(e){
isMouseDown = false;
},false)
}
can.addEventListener(clickName,function(e){
isMouseDown = true;
var x = (device ? e.touches[0].pageX : e.clientX);
var y = (device ? e.touches[0].pageY : e.clientY);
ctx.globalCompositeOperation = 'destination-out';
fillCircle.call(ctx,x,y,touchRadius);
},false);
can.addEventListener(moveName,function(e){
if(!device&& !isMouseDown){
return false;
}
var x = (device ? e.touches[0].pageX : e.clientX);
var y = (device ? e.touches[0].pageY : e.clientY);
ctx.globalCompositeOperation = 'destination-out';
fillCircle.call(ctx,x,y,touchRadius);
var m = getBaifenbi(ctx, 200, 100);
console.log(m)
if(m>50){alert('gggg')}
},false)
</script>
</body>

</html>

canvas写的一个刮奖效果的更多相关文章

  1. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  2. HTML5 Canvas实战之刮奖效果

    近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流. 1.效果 2.原理 原理很简单,就是在刮奖区添加两个canvas, ...

  3. HTML5实现刮奖效果

    原文:HTML5实现刮奖效果 要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperati ...

  4. 使用MDScratchImageView实现刮奖效果

    使用MDScratchImageView实现刮奖效果 https://github.com/moqod/iOS-Scratch-n-See 最终效果: 其实这是使用了别人的东西而已:) 源码: // ...

  5. canvas写的一个小时钟demo

    <!DOCTYPE html> <html> <head> <title>HTML5 Canvas Demo of clock</title> ...

  6. canvas 利用canvas中的globalCompositeOperation 绘制刮奖 效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  7. HTML5 Canvas实战之刮奖效果【转】

    开源项目地址:https://github.com/artwl/Lottery 作者博客地址:http://www.cnblogs.com/jscode/p/3580878.html 谢谢浏览!

  8. [原创]基于html5新标签canvas写的一个小画板

    最近刚学了canvas,写个小应用练习下 源代码 <!DOCTYPE> <html> <head> <meta http-equiv="Conten ...

  9. [js高手之路] html5 canvas教程 - 制作一个数码倒计时效果

    效果图: 这个实例主要注意: 1,剩余时间的计算 2,每个时间数字的绘制 时间主要有0-9和一个冒号组成,用数组来表示( 0: 就是不画圆,1:就是画一个蓝色的圆 ) num.js文件: var di ...

随机推荐

  1. 动态加载、移除、替换JS和CSS

    //动态加载一个js/css文件 function loadjscssfile(filename, filetype) { if (filetype == "js") { var ...

  2. python（23）re函数：compile、match、search、findall

    正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式. re 模块使 Python ...

  3. gc之四--Minor GC、Major GC和Full GC之间的区别

    针对HotSpot VM的实现,它里面的GC其实准确分类只有两大种: Partial GC:并不收集整个GC堆的模式 Young GC:只收集young gen的GC Old GC:只收集old ge ...

  4. 每天一个 Linux 命令（6）：rmdir 命令

    今天学习一下linux中命令: rmdir命令.rmdir是常用的命令,该命令的功能是删除空目录,一个目录被删除之前必须是空的.(注意,rm – r dir命令可代替rmdir,但是有很大危险性.)删 ...

  5. 设置ajax 同步执行

    Ajax请求默认的都是异步的如果想同步 async设置为false就可以(默认是true) var html = $.ajax({  url: "some.php",  async ...

  6. 如何调试IIS错误信息

    原文链接: http://blogs.msdn.com/b/tess/archive/2009/03/20/debugging-a-net-crash-with-rules-in-debug-diag ...

  7. 【转】关于LWF——线性工作流

    1.什么是LWF? LWF全称Linear Workflow,中文翻译为线性工作流.“工作流”在这里可以当作工作流程来理解.LWF就是一种通过调整图像Gamma值,来使得图像得到线性化显示的技术流程. ...

  8. PIC32MZ tutorial -- Change Notification

    In my last post I implement "Key Debounce" with port polling, port polling is not very eff ...

  9. 也说virtualbox下安装centos7

    以前一直在VMware Workstation下安装虚拟机系统,这几天由于电脑被别人使用误升级为win10,而导致原来的LNMP不能使用,查找原因在于即使是最新的VM12.1.1也只是支持win8而已 ...

  10. Excel_常用快捷键

    Ctrl+B        粗体Ctrl+U         下划线Ctrl+I         斜体Ctrl+5      删除线Ctrl+9      隐藏选中的行Ctrl+0      隐藏选中 ...