js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013-11-18 16:53
1241 查看
<!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>
相关文章推荐
- js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
- 《React-Native系列》23、 js实现下拉刷新效果(Android和iOS通用)
- 手机端js和html5刮刮卡效果
- html5 js 实现刮刮卡效果
- 用HTML5的canvas实现抽奖刮刮卡的效果(只需十几行代码)
- JS中兼容实现android和ios系统手机打开相机并可选择相册功能
- 《React-Native系列》23、 js实现下拉刷新效果(Android和iOS通用)
- Android App中实现简单的刮刮卡抽奖效果的实例详解
- 基于JS实现Android,iOS一个手势动画效果
- Android学习之RecylerView完美实现瀑布流效果
- 分享超简单实用的用JS实现DIV、图片圆角效果,关键是很兼容
- Android仿IOS级联菜单_ListView实现区域级联选择效果
- android 仿qq5.3,下拉刷新,自动加载更多,下拉回弹,仿IOS橡皮筋效果,通用版,效果完美
- Android 4.3实现类似iOS在音乐播放过程中如果有来电则音乐声音渐小铃声渐大的效果
- iOS开发之实现图片自动切换(类似android画廊效果)
- Android布局控件DrawerLayout实现完美侧滑效果
- 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果
- 使用HTML5实现刮刮卡效果
- Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么