<!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. docker中使用systemd

    由于以下几个原因,docker的官方centos镜像中没有提供systemd服务:   systemd requires the CAP_SYS_ADMIN capability. This mean ...

  2. 为什么要用Maven？

    早期还在学怎么用Ant构建项目时,就有看到说Maven是Ant的替代品,但真正意义去了解Maven,还是因为以前的公司一老员工在做OpenJMS二次开发时,从网上下载了源码,然后用Maven构建它. ...

  3. iOS-浅谈runtime运行时机制

      一.首先,从  runtime.h头文件中找到对 class 与 object 的定义  /// An opaque type that represents an Objective-C cla ...

  4. jquery是如何架构的.

    心里一直有个疑问. jquery是如何做到一个jQuery即可以当方法用比如$();又可以当对象用$.extend(); 现在总结一下吧 function method(){} var m=new m ...

  5. Js 扩展

    计算字符串的字节长度 String.prototype.len = function () { return this.replace(/[^\x00-\xff]/g, 'xx').length; } ...

  6. oracle11g rac asm存储数据迁移

    OS:rh6.4 ORACLE 11g RAC ASM OCR和VOTING DISK在crs磁盘组,控制文件.数据文件.参数文件在DATA组. 1.备份数据库 RUN {ALLOCATE CHANN ...

  7. 解决EditorLineEnds.ttr被锁定导致Delphi2006-2010无法启动的问题

    在批处理最后增加了启动Delphi的命令.将批处理和Delphi放在同一目录即可. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  8. C++学习基础五之函数参数——形参

    一.理论部分 C++中函数形参主要分为两类,如图1所示, 图1 总结: 一.当函数参数为非引用形参时,传进函数体内的是实参的拷贝,(注意,对于基本类型而言,拷贝的是实参的值,对于指针而言拷贝的是实参的 ...

  9. IO同步、异步与阻塞、非阻塞

    一.同步与异步同步/异步, 它们是消息的通知机制 1. 概念解释A. 同步所谓同步,就是在发出一个功能调用时,在没有得到结果之前,该调用就不返回. 按照这个定义,其实绝大多数函数都是同步调用(例如si ...

  10. TIJ读书笔记05-this关键字

    TIJ读书笔记05-this关键字 概述 this的用法 static方法 概述 两个对象同时调用一个方法,那么jvm怎么知道是哪个方法调用的呢. 我们在书写的时候会写成a.fun(1) 或者b.fu ...