您的位置：首页 > 移动开发

html5中canvas画布实现手机端和移动端的刮刮乐效果

2016-02-19 14:37 841 查看

用html5中的canvas实现刮刮乐的效果

使用html+css实现背景的样式

使用clearRect()方法实现挂去的作用

手机端使用addEventListener（）监听

手机端滑动事件touchmove

实现的效果图

此图背景是来自网络

html部分代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>刮刮乐</title>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/api.js" type="text/javascript"></script>
<style>
.content{
width:900px;
height: 500px;
background: url("images/zj.jpg") no-repeat;
margin: 0 auto;
overflow: hidden;
position: relative
}
p{ width: 300px;height: 50px; background: #fff; margin: 0 auto; margin-top: 380px; margin-left: 360px; line-height: 50px;
text-align: center;display: block; }
#Canvas{ margin-left: 360px;position: absolute; bottom: 70px;cursor: pointer}
</style>
</head>
<body>
<div class="content">
<p>谢谢惠顾</p>
<canvas width="300" height="50" id="Canvas">你的浏览器版本太低</canvas>
</div>
</body>
</html>

js代码：

window.onload=function(e){
var canva=document.getElementById("Canvas");
if(canva.getContext){
var inghei=100;
canva2D=canva.getContext("2d");
canva2D.fillStyle="#ccc";
canva2D.fillRect(0,0,300,50);
//鼠标移动到“灰色上”
canva.onmousemove=function(e){
var  canavOffest = $(canva).offset();
var canvX=Math.floor(e.pageX - canavOffest.left);
var canvY=Math.floor(e.pageY-canavOffest.top);
var canvY =canvY+ parseInt(inghei);
lottery(canvX,canvY,canva2D);
}
function lottery(x,y,c){
c.clearRect(x,y-inghei,20,20);

}
//移动端手滑动
canva.addEventListener('touchmove',function(event){
//如果触屏时只有一只手
if(event.targetTouches.length == 1){
event.preventDefault();// 阻止浏览器默认事件，重要
var touch = event.targetTouches[0];
var  canavOffest = $(canva).offset();
var canvX=Math.floor(touch.pageX - canavOffest.left);
var canvY=Math.floor(touch.pageY-canavOffest.top);
var canvY =canvY+ parseInt(inghei);
lottery(touch.canvX,touch.canvY,canva2D);
}

},false);
}
}

本文代码：

http://download.csdn.net/detail/wu_niang/9436630

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航