js HTML5手机刮刮乐代码
手机刮刮乐HTML5代码, 使用原型prototype扩展了一个clearArc 清除圆内像素的功能， 此功能未完成扇形清除功能， 此外，在清除圆内的像素时，还有点瑕疵，右边和下边还不够圆滑，有明显的齿状。如果你找到修复方法请一定要告诉我哟。不过此清除方法用于刮刮乐已经完全满足需求了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>刮刮乐</title>
<script type="text/javascript">
window.onload = function() {
init();
}
CanvasRenderingContext2D.prototype.clearArc=function(x,y,radius,startAngle, endAngle, counterclockwise){
var distance = function(x0,y0,x1,y1){
var dis = Math.sqrt(Math.pow(x0-x1,2)+Math.pow(y0-y1,2));
//return Math.ceil(dis*10000)/10000;
return Math.round(dis*10000)/10000;
};
//首先获得矩形
var diameter = radius*2;
var startX = x-radius;
var cx = radius-(0-startX);
startX = startX<0?0:startX;
cx = cx-startX;
var startY = y-radius;
var cy = radius-(0-startY);
startY = startY<0?0:startY;
cy = cy-startY;
var imgData = this.getImageData(startX,startY,diameter,diameter);//需要处理的矩形
for (var i=0;i<imgData.data.length;i+=4){
//矩阵内的坐标
var ii = i/4;
var ix = Math.floor(ii/imgData.width);
var iy = ii%imgData.height;
var dis = distance(ix,iy,cx,cy);
if(dis<=radius){//此点在圆内
imgData.data[i+0]=0;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=0;
continue;
}
var dr = dis-radius;
if(dr<Math.SQRT2){
var n = Math.sqrt(Math.pow(dr, 2)/2)*256;//新
var o = imgData.data[i+3];
imgData.data[i+3]=n<o?n:o;
continue;
}
}
this.putImageData(imgData,startX,startY);
};
function init() {
var imageWidth = 200;
var imageHeight = 100;
var gglc = document.getElementById("gglc");
var gglc2D = gglc.getContext("2d");
gglc2D.fillStyle = '#cccccc'; //设置覆盖层的颜色
gglc2D.fillRect(1, 1, imageWidth, imageHeight); //设置覆盖的区域
//gglc2D.clearArc(25,25,20);
gglc.addEventListener("touchmove", function(event) {
event.preventDefault();
for(var i in event.targetTouches){
var touch = event.targetTouches[i];
gglc2D.clearArc(touch.pageX,touch.pageY,20);
}
}, false);
gglc.addEventListener("touchstart", function(event) {
event.preventDefault();
for(var i in event.targetTouches){
var touch = event.targetTouches[i];
gglc2D.clearArc(touch.pageX,touch.pageY,20);
}
}, false);
}
</script>
</head>
<body>
<div style="position: relative; width: 100%;height: 100%;">
<div style="position: absolute; width: 200px; height: 100px; text-align: center;line-height: 100px;border: 1px solid #ccc;'">谢谢惠顾</div>
<canvas style="position: absolute;" id="gglc" width="201" height="101"></canvas>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Android实现刮刮乐示例分析
微信公众号有很多都做刮刮乐的活动,本文就实现了刮刮乐的效果,具体代码如下: 首先要做一个类似橡皮擦的东西吧,然后才能把纸上的笔迹擦除 /** * FileName: SplashActivity.java * * @desc 橡皮擦功能,类似刮刮乐效果 * @author HTP * @Date 20140311 * @version 1.00 */ public class Text_Rubbler extends TextView { private float TOUCH_TOLERANC
-
微信营销平台系统–刮刮乐的开发
下载 jquery扩展wScratchPad.js, 原站的页面打不开,我这里提供一个下载地址 wScratchPad-2.1.0.zip 然后(冷静),一些没节操的博主,直接转别人的文章,验证的过程都省了,应该坑了不是小白.我这里修正一下 在这个扩展里面,怎么才能过去用户的刮开的面积 复制代码 代码如下: $("#wScratchPad3").wScratchPad({ cursor:'', //设置鼠标的样式 color:'gray' , //设置覆盖物的颜色,跟image2功
-
移动端刮刮乐的实现方式（js+HTML5）
程序员有一种惯性思维,就是看见一些会动的东西(带点科技含量的,猫啊,狗啊就算了),总要先想一遍,这玩意用代码是怎么控制的.比如电梯,路边的霓虹灯,遥控器,小孩子的玩具等,都统统被程序员"意淫"过. 有时候还会感觉程序员看世界会看的透彻一点............. 想必大家都玩过刮刮乐,下面就介绍一种刮刮乐的移动端实现方式!用到canvas 1.用HTML 5 canvas globalCompositeOperation 属性实现刮刮乐 思路: (1)首先需要一个盒子定位,确定刮刮乐
-
基于Android自定义控件实现刮刮乐效果
只是简单的实现了效果,界面没怎么做优化,不过那都是次要的啦!!相信大家都迫不及待的想看效果图了吧, 其中主要的彩票视图类和橡皮擦类都是通过代码的方式构建视图,布局文件就一个主activity_main 上代码!! 主activity: package com.guaguale; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; imp
-
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
本文实例讲述了JS+HTML5手机开发之滚动和惯性缓动实现方法.分享给大家供大家参考,具体如下: 1. 滚动 以下是三种实现方式: 1) 利用原生的css属性 overflow: scroll div id= parent style = overflow:scroll; divid='content'内容区域/div /div Notice: 在android 有bug, 滚动完后会回退到最顶端的内容区域,解决办法是使用后两种方式实现 2)js 编程实现 思路:对比手指在屏幕上移动前后位置变化
-
native.js获取手机硬件基本信息实例代码android版
为大家分享一些android公共方法native.js实现代代码,如获取手机MAC地址,手机内存大小,手机存储空间大小,手机CPU信息等手机硬件基本信息 native.js获取手机MAC地址 /*得到手机MAC地址*/ function getMac() { var mac = "xxx-xxx-xxx-xxx"; if (plus.os.name == "Android") { //WifiManager var Context = plus.android.im
-
js HTML5手机刮刮乐代码
手机刮刮乐HTML5代码, 使用原型prototype扩展了一个clearArc 清除圆内像素的功能, 此功能未完成扇形清除功能, 此外,在清除圆内的像素时,还有点瑕疵,右边和下边还不够圆滑,有明显的齿状.如果你找到修复方法请一定要告诉我哟.不过此清除方法用于刮刮乐已经完全满足需求了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="view
-
20行JS代码实现网页刮刮乐效果
分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码 效果如下 盖伦.jpg 刮刮乐.gif HTML部分 <body>  <canvas id="canvas" width="400" height="300"></canvas> </body> 没什么要特别注意的 为了效果加了些CSS样式 CSS部分 <style type=&
-
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
绝对值得看的来篇,哈哈.本人亲自完成,有错误请大家指出: 现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的 ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS 如果要在pc浏览的话,得改下js,目前支持谷歌,火狐,ie>=10,如果网友想要的话我就去写个 代码如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"&g
-
手机端js和html5刮刮卡效果
H5的Canvas实现刮刮卡效果. 刮开之后是随机生成的8位码. IE8不行... <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&qu
-
Android刮刮乐效果-proterDuffXfermode的示例代码
先看看实现的效果 这个场景主要是模拟我们有些app里面的刮刮乐中奖的效果,主要是利用Android的proterDuffXfermode这个类去实现的. proterDuffXfermode 在用Android中的Canvas进行绘图时,可以通过使用PorterDuffXfermode将所绘制的图形的像素与Canvas中对应位置的像素按照一定规则进行混合,形成新的像素值,从而更新Canvas中最终的像素颜色值,这样会创建很多有趣的效果.PorterDuffXfermode的功能十分的强大,其他的
-
利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 查看演示 源码下载 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果. HTML 我们只需要在页面中加入canvas标签元素,其他的就看
-
原生JavaScript实现刮刮乐
本文实例为大家分享了JavaScript实现刮刮乐的具体代码,供大家参考,具体内容如下 原理 鼠标按住移动的时候,实现刮刮乐的效果,那就是鼠标按下的同时鼠标移动,那就清除画布.松开鼠标,鼠标移动不再清除画布了,那就得清除事件. canvas画布 1.获取画布元素 var canvas = document.getElementById('canvas'); 2.获取绘图对象getContext var ctx = canvas.getContext('2d'); 3.画线 ctx.lineWid