<!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. 【python】类的访问限制

    在Class内部,可以有属性和方法,而外部代码可以通过直接调用实例变量的方法来操作数据,这样,就隐藏了内部的复杂逻辑. 但是,从前面Student类的定义来看,外部代码还是可以自由地修改一个实例的na ...

  2. Eclipse 配置Maven

    Eclipse 配置Maven 下载Maven 首先在官网下载Maven:http://maven.apache.org/download.cgi 下载后将其解压到相应的位置 配置Maven环境变量 ...

  3. [家里蹲大学数学杂志]第041期中山大学数计学院 2008 级数学与应用数学专业《泛函分析》期末考试试题 A

    1 ( 10 分 ) 设 $\mathcal{X}$ 是 Banach 空间, $f$ 是 $\mathcal{X}$ 上的线性泛函. 求证: $f\in \mathcal{L}(\mathcal{X ...

  4. 标清与高清，720p和1080p，720i和720p，h264与h265

    480x320, 640x480 标清 1024x720p 高清 1920x1080i (隔行扫描) 也属于高清 1920x1080p 全高清 3840x2160,7680x4320 超(高)清   ...

  5. 2，SFDC 管理员篇 - 组织架构

    1,组织架构 Setup | Administrator | Manage User| Role 组织层级有三种模式,基于区域划分,基于产品划分,基于公司规模划分层级(目标客户群体划分层级或渠道划分) ...

  6. PIC32MZ tutorial -- Timer Interrupt

    An interrupt is an internal or external event that requires quick attention from the controller. The ...

  7. RadGridView标头分行

  8. Python 前端之JQuery

    查找: 选择器 筛选器 操作: CSS 属性 文本 事件: 优化 扩展: Form表单验证 Ajax: 偷偷发请求 www.php100.com/manual/jquery http://blog.j ...

  9. django中的静态文件管理

    一个站点通常需要保存额外的文件,比如图片   css样式文件   js脚本文件 ,在django中,倾向于将这些文件称为 静态文件.django提供了django.contrib.staticfile ...

  10. Android文件系统的结构

    Android 4.2.2 版本的文件系统 内核版本为 3.0.31 版本号为JDQ39 factory//估计是存放网络通信协议的登录密钥的|-- bluetooth|-- hdcp.keys|-- ...