<!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. HTML5能取代IOS原生应用吗

    介绍 移动应用程序(App)和HTML5都是目前最火的技术,二者之间也有不少重叠之处.在移动设备浏览器里运行的html5的web页面,也可以重新打包成不同平台上运行的app.目前很多浏览器都有很好的跨 ...

  2. 使用air16sdk打包ipa报错

    报错如下图: google下 https://forums.adobe.com/thread/1659726 说明了一切 首先:air sdk中打包ipa 需要使用ios sdk的路径但是这个路径最后 ...

  3. css3++js钟表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. ADF_Data Binding系列2_使用URL Service Data Control

    2015-02-16 Created By BaoXinjian

  5. Android Gradle 技巧之一： Build Variant 相关

    Build Variant android gradle 插件,允许对最终的包以多个维度进行组合. BuildVariant = ProductFlavor x BuildType 两个维度 最常见的 ...

  6. 谈谈Java利用原始HttpURLConnection发送POST数据

    这篇文章主要给大家介绍java利用原始httpUrlConnection发送post数据,设计到httpUrlConnection类的相关知识,感兴趣的朋友跟着小编一起学习吧 URLConnectio ...

  7. [ActionScript 3.0] AS3.0 下雨及涟漪效果

    帧代码: stage.frameRate = 80; function init(x1:Number,y1:Number) { var mc:MovieClip=new MovieClip(); ad ...

  8. JAVA设计模式之不变模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述不变(Immutable)模式的: 一个对象的状态在对象被创建之后就不再变化,这就是所谓的不变模式. 不变模式的结构 不变模式可增强对象的 ...

  9. IDEA中PlantUML的使用

    PlantUML官网地址:http://www.plantuml.com/ IDEA中安装PlantUML Plugins File-->Settings-->Plugins-->I ...

  10. eclipse配置javacv0.8

    之前配置了一次javacv,但是忘了做笔记,这次又重新查了一遍资料,很多东西模棱两可,浪费了很多时间,这次配置成功,总结如下,希望能帮到大家. 如不明确,可以联系我.   javacv下载 https ...