js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS

绝对值得看的来篇,哈哈。本人亲自完成,有错误请大家指出:
现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的
​ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS
如果要在pc浏览的话,得改下js,目前支持谷歌,火狐,ie>=10,如果网友想要的话我就去写个
代码如下:


复制代码 代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<title>eraser effect</title>
<script type="text/javascript" src="jquery.core.js"></script>
<style>
#canvas {
background:url(winning-ticket.jpg);<!--奖品图片-->
width: 531px;
height: 438px;
}
.before{
background:none !important;
}
#canvas canvas {
cursor: url("hand.png") 0 0, auto;<!--PC端的手势图片-->
}
</style>
</head>
<body oncontextmenu="return false;" onselectstart="return false;">
<div id="canvas"></div>
</body>
<script type="text/javascript">
(function() {
window.onload = function(){
/**判断浏览器是否支持canvas**/
try{
document.createElement('canvas').getContext('2d');
}catch(e){
var addDiv = document.createElement('div');
alert('您的手机不支持刮刮卡效果哦~!');
}
};
var u = navigator.userAgent,mobile = '';
if(u.indexOf('iPhone') > -1) mobile = 'iphone';
if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) mobile = 'Android';
function createCanvas(parent, width, height) {
var canvas = {};
canvas.node = document.createElement('canvas');
canvas.context = canvas.node.getContext('2d');
canvas.node.width = width || 100;
canvas.node.height = height || 100;
parent.appendChild(canvas.node);
return canvas;
}
function init(container, width, height, fillColor, type) {
var canvas = createCanvas(container, width, height);
var ctx = canvas.context;
// define a custom fillCircle method
ctx.fillCircle = function(x, y, radius, fillColor) {
this.fillStyle = fillColor;
this.beginPath();
this.moveTo(x, y);
this.arc(x, y, radius, 0, Math.PI * 2, false);
this.fill();
};
ctx.clearTo = function(fillColor) {
ctx.fillStyle = fillColor;
ctx.fillRect(0, 0, width, height);
};
ctx.clearTo(fillColor || "#ddd");
canvas.node.addEventListener("touchstart",function(e){
canvas.isDrawing = true;
},false);
canvas.node.addEventListener("touchend",function(e){
canvas.isDrawing = false;
},false);
canvas.node.addEventListener("touchmove",function(e){
if (!canvas.isDrawing) {
return;
}
if(type == 'Android'){
var x = e.changedTouches[0].pageX - this.offsetLeft;
var y = e.changedTouches[0].pageY - this.offsetTop;
}else{
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
}
var radius = 20;
var fillColor = '#ff0000';
ctx.globalCompositeOperation = 'destination-out';
ctx.fillCircle(x, y, radius, fillColor);
},false);
}
var container = document.getElementById('canvas');
init(container, 531, 438, '#ff0000', mobile);
})();
</script>
</html>

时间: 2013-11-16

Android抽奖轮盘的制作方法

本文实例为大家分享了Android抽奖轮盘的具体代码,供大家参考,具体内容如下 main布局(图片资源请自行寻找,抱歉) <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_gra

Android App中实现简单的刮刮卡抽奖效果的实例详解

主要思想: 将一个view设计成多层:背景层,含中奖信息等: 遮盖层,用于刮奖,使用关联一个Bitmap的Canvas 在该Bitmap上,使用它的canvas.drawPath的api来处理 手势滑动(类似刮奖的动作) 使用paint.setXfermode 来进行消除手势滑动区域 public class GuaView extends View { private Bitmap mBitmap; //遮盖的图层 private Canvas mCanvas; //绘制遮盖图层 privat

Android自定义View实现QQ运动积分转盘抽奖功能

因为偶尔关注QQ运动, 看到QQ运动的积分抽奖界面比较有意思,所以就尝试用自定义View实现了下,原本想通过开发者选项查看下界面的一些信息,后来发现积分抽奖界面是在WebView中展示的,应该是在H5页面中用js代码实现的,暂时不去管它了. 这里的自定义View针对的是继承自View的情况,你可以将Canvas想象为画板, Paint为画笔,自定义View的过程和在画板上用画笔作画其实类似,想象在画板上作画的过程,你要画一个多大图形(对应View的测量 onMeasure方法),你要画什么样的图

Android中利用SurfaceView制作抽奖转盘的全流程攻略

一.概述 今天给大家带来SurfaceView的一个实战案例,话说自定义View也是各种写,一直没有写过SurfaceView,这个玩意是什么东西?什么时候用比较好呢? 可以看到SurfaceView也是继承了View,但是我们并不需要去实现它的draw方法来绘制自己,为什么呢? 因为它和View有一个很大的区别,View在UI线程去更新自己:而SurfaceView则在一个子线程中去更新自己:这也显示出了它的优势,当制作游戏等需要不断刷新View时,因为是在子线程,避免了对UI线程的阻塞. 知

Android简单实现圆盘抽奖界面

闲来无事,做了一个简单的抽奖转盘的ui实现,供大家参考 package com.microchange.lucky; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.RectF; import android.util.AttributeSet;

Android使用surfaceView自定义抽奖大转盘

使用surfaceView自定义抽奖大转盘 话不多说,先上效果图 完整代码地址欢迎start 实现思路以及过程 1.首先了解SurfaceView的基本用法,它跟一般的View不太一样,采用的双缓存机制,可以在子线程中绘制View,不会因为绘制耗时而失去流畅性,这也是选择使用SurfaceView去自定义这个抽奖大转盘的原因,毕竟绘制这个转盘的盘块,奖项的图片和文字以及转动都是靠绘制出来的,是一个比较耗时的绘制过程. 2.使用SurfaceView的一般模板样式 一般会用到的成员变量 priva

Android打造流畅九宫格抽奖活动效果

因为company项目中需要做九宫格抽奖活动,以前都没有做过类似的功能,虽然之前在浏览大神们的博客中,无意中也看到了好多关于抽奖的项目,但因为项目中没有需要,一直都没有点击进去看.这次不去看估计不行.直到公司计划要做抽奖功能,才迫不得已上网查找demo 网上找了大半天,好不容易找到了几个demo,下载下来,解压缩包发现竟然里面空空如也,只有几张九宫格的图片,害我白白浪费了几个CSDN积分.后面在eoe网站那发现了一个demo,于是好开心,下载下来后马上导入到工程中,运行看了效果,九宫格是出来了,

Android实现抽奖转盘实例代码

本文详述了android抽奖程序的实现方法,程序为一个抽奖大转盘代码,里面定义了很多图形方法和动画. 实现主要功能的SlyderView.java源代码如下: import android.app.Activity; import android.content.Context; import android.graphics.BlurMaskFilter; import android.graphics.Canvas; import android.graphics.Color; import

Android 获取屏幕尺寸实例代码

Android 获取屏幕尺寸实例代码 实现代码: /** * <supports-screens * android:smallScreens="true" * android:normalScreens="true" * android:largeScreens="true" * android:resizeable="true" * android:anyDensity="true" />

Android字段验证的实例代码

先给大家展示效果图: package com.example.walkerlogin1; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.EditText; import android.widge

Android 操作excel功能实例代码

学习app对excel的读写控制 1.界面设计 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id

Android 画一个太极图实例代码

今天练手一下,一起来画个太极图吧~ 最终效果如下: 最终效果 一般都是先讲原理,我就反其道而行,先讲实现吧. 1.继承实现初始化方法 继承View,实现基本的构造函数: public TestView(Context context) { this(context, null); } public TestView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public TestView(Context c

Webview实现android简单的浏览器实例代码

WebView是Android中一个非常实用的组件,它和Safai.Chrome一样都是基于Webkit网页渲染引擎,可以通过加载HTML数据的方式便捷地展现软件的界面,下面通过本文给大家介绍Webview实现android简单的浏览器实例代码. 实现了浏览器的返回 前进 主页 退出 输入网址的功能 注释的很清楚啦 就不多说了 首先是布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu

Android绘制验证码的实例代码

在前面仿华为加载动画.仿网易音乐听歌识曲-麦克风动画中,我们通过绘图的基础知识完成了简单的绘制.在本例中,我们将绘制常见的验证码. 一.效果图 二.知识点与思路分析 通过上面的效果图观察,我们可以看到里面有绘制的随机线条,随机绘制的验证码. 绘制线条,直线或曲线 绘制文本,生成的验证码文本的绘制 绘制圆点. 三.代码编写 /** * Created by Iflytek_dsw on 2017/7/3. */ public class IdentifyCodeUtil { private sta

Android系统音量条实例代码

最近在定制Android系统音量条,发现代码还是蛮多的,下面总结一下. 代码是基于5.1.1版本的. 系统音量条的代码是在/frameworks/base/packages/SystemUI/src/com/android/systemui/volume/VolumePanel.java 布局文件是在/frameworks/base/packages/SystemUI/res/layout下. 先看看原生的音量条样式: 在代码中可以发现volume_dialog.xml这个文件,这个文件就是承载

Android 动态菜单实现实例代码

Android 动态菜单 先上效果图 比较简单,主要就是属性动画的使用和坐标角度的小细节. 实现 实现效果: 图标按照路径一路缩放渐变过来即可. 核心代码 /** * Item开启动画 * * @param btnItem * @param index * @param total * @param radius */ private void btnItemStartAnimator(View btnItem, int index, int total, int radius) { if (b

Android Toast提示封装实例代码

Android Toast提示封装 Android中经常用到Toast提示,项目中很多Toast提示,写很长的一行,简单的封装一下,将Toast方法提出来,很方便使用: 实例代码: /** * 提示字符串 * short Toast * @param context * @param text * by Hankkin at:2015-10-07 21:14:43 */ public static void showToast(Context context, String text) { To