<!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. PHP DES 加解密

    代码很简单,如下: <?php $key = 'very important data'; function jiami($key, $str) { /* Open module, and cr ...

  2. [驱动]内核添加USB转串口驱动支持

    转自:http://blog.csdn.net/gatieme/article/details/49491325 目录 1. 问题 2. 驱动源码 3. 内核配置 4. 编译内核和模块驱动 5. 加载 ...

  3. 黄聪： PHP WkHtmlToPdf/WkHtmlToImage 将网页直接转换成pdf和图片

    function convert($type='pdf') { $filename=time(); $url=$this->input->get("url"); if( ...

  4. redis shell命令大全

    redis shell命令大全(转自http://blog.mkfree.com/posts/5105432f975ad0eb7d135964) 作者:oyhk   2013-1-28 3:11:35 ...

  5. oracle数据库如何创建角色并对角色授予权限

    目标: 1.创建角色test1_role, 授予create session 权限 2.创建角色test2_role,授予create procedure, create sequence, crea ...

  6. Bootstrap之BootstrapDialog

    Make use of Bootstrap's modal more monkey-friendly. 参考地址:http://nakupanda.github.io/bootstrap3-dialo ...

  7. mybatis配置优化

    1.加入日志log4j 1)加入jar包:log4j-1.2.17.jar 2)加入log4j配置文件: 可以使properties或者xml形式 log4j.rootLogger = DEBUG,C ...

  8. 2015年第六届蓝桥杯C/C++程序设计本科B组决赛

    1.积分之谜(枚举) 2.完美正方形 3.关联账户(并查集) 4.密文搜索 5.居民集会 6.模型染色 1.积分之迷 小明开了个网上商店,卖风铃.共有3个品牌:A,B,C.为了促销,每件商品都会返固定 ...

  9. ORCLE数据库导出导入

    从一个用户导出用户所有结构数据 再导入另一个用户里面 ORACLE导出用户下的数据库  exp 命令 用户名/密码服务名 文件地址  owner=(用户名)exp COM_HIOSC_OLD/COM_ ...

  10. DOCTYPE 中xhtml 1.0和 html 4.01区别分析

    前者相对于后者有以下特性: 1.所有的标记都都要闭合 所有的标记都要闭合,如果是单独不成对的标签,在标签最后加一个"/"来关闭它.例如: <h6>close tag & ...