使用canvas实现刮奖刮开效果

wocacaca
wocacaca 发布于 2015-02-28 11:51:10 浏览:2838 类型:原创 - 随笔 分类:HTML/CSS - 我的游戏 二维码: 作者原创 版权保护
目前在html5和css3的热潮下,html页面的效果也是层出不穷,下面我们来介绍使用canvas来模仿刮奖刮开效果。

原理

   在需要刮出的图片或者文字上方盖上一层灰色或者其他背景的canvas画布,当手指或者鼠标点击画布并移动时,将画布上移动过的轨迹变成透明即可。

DEMO

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<style>
.content,.cover{width:400px; height:400px; position:absolute; left:50%; top:50%; margin:-200px 0 0 -200px;}
.content{ font-size:48px; line-height:400px; text-align:center;}
h3{ text-align:center; line-height:200px;}
</style>

</head>

<body>
<h3>快来刮开!!!</h3>
<div class="content" >中奖啦~!</div>
    <canvas id="cover" class="cover" width="400" height="400"></canvas>
</body>

<script>
var isdown = false,
cover = document.getElementById("cover"),

covercanvas = cover.getContext("2d");
//
covercanvas.fillStyle="transparent";
  //要在fillter()之前先定义画布背景为透明
covercanvas.fillRect(0,0,400,400);

function fillter( canvas ){
  //定义画布背景为#ccc和画布大小
  canvas.fillStyle="#ccc";
  canvas.fillRect(0,0,400,400);
}
function isDown(e){
   //判断鼠标和手指是否按下
  e.preventDefault();
  isdown=true;       
}
function isUp(e){
  //判断鼠标和手指是否抬起
  isdown=false;       
}
function draw( e ){
  //如果isdown为true(即鼠标或手指在画布区域按下)获取其在画布上的位置并画出轨迹
  e.preventDefault();
  if(isdown){
   if(e.changedTouches){
    //判断如果是touch事件(即手指按下)改变event
                e=e.changedTouches[e.changedTouches.length-1];
            }

   var _height= parseInt((window.innerHeight-400)/2),
    _width= parseInt((window.innerWidth-400)/2),
    touchTop=e.clientY - _height,
    touchLeft=e.clientX - _width;
   
   with(covercanvas){
    // 画出按下时画布上显示的图案(这里是一个半径为10px的圆形)
    beginPath();
    arc(touchLeft, touchTop, 10, 0, Math.PI * 2);
    fill();
   }       
  }
  //alert(touchTop);
}
fillter(covercanvas);
covercanvas.globalCompositeOperation = 'destination-out';
cover.addEventListener('touchstart',isDown);
cover.addEventListener('touchmove',draw);
cover.addEventListener('touchend',isUp);
cover.addEventListener('mousemove',draw);
cover.addEventListener('mousedown',isDown);
cover.addEventListener('mouseup',isUp);

</script>
</html>

分析

    demo中在class为content的div上盖上一层灰色的画布,然后通过获取鼠标和手指的坐标计算出在画布位置上的坐标,通过在坐标原点位置画一个半径10px的透明圆形来透过画布,显示出画布下的内容。本demo是用时需要改变的内容为_width,_height,touchTop,touchLeft这几个参数,根据自身画布的位置自行计算即可。由于是长按事件,记得在移动端阻止浏览器默认功能。

个人博客:http://mikomoon.com/blog/     PS:新开的博客,希望大家都来评个论呀,么么哒~~

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<style>
.content,.cover{width:400px; height:400px; position:absolute; left:50%; top:50%; margin:-200px 0 0 -200px;}
.content{ font-size:48px; line-height:400px; text-align:center;}
h3{ text-align:center; line-height:200px;}
</style>

</head>

<body>
	<h3>快来刮开!!!</h3>
	<div class="content" >中奖啦~!</div>
    <canvas id="cover" class="cover" width="400" height="400"></canvas>
</body>

<script>
var isdown = false,
	cover = document.getElementById("cover"),
	
	covercanvas = cover.getContext("2d");
	//
	covercanvas.fillStyle="transparent";
	covercanvas.fillRect(0,0,400,400);
	
	function fillter( canvas ){
		canvas.fillStyle="#ccc";
		canvas.fillRect(0,0,400,400);
	}
	function isDown(e){
		e.preventDefault();
		isdown=true;	
	}
	function isUp(e){
		isdown=false;	
	}
	function draw( e ){
		e.preventDefault();
		if(isdown){
			if(e.changedTouches){
                e=e.changedTouches[e.changedTouches.length-1];
            }

			var _height= parseInt((window.innerHeight-400)/2),
				_width= parseInt((window.innerWidth-400)/2),
				touchTop=e.clientY - _height,
				touchLeft=e.clientX - _width;
			
			with(covercanvas){
				beginPath();
				arc(touchLeft, touchTop, 10, 0, Math.PI * 2);
				fill();
			}	
		}
		//alert(touchTop);
	}
	fillter(covercanvas);
	covercanvas.globalCompositeOperation = 'destination-out';
	cover.addEventListener('touchstart',isDown);
	cover.addEventListener('touchmove',draw);
	cover.addEventListener('touchend',isUp);
	cover.addEventListener('mousemove',draw);
	cover.addEventListener('mousedown',isDown);
	cover.addEventListener('mouseup',isUp);
	
</script>
</html>
标签:
z
给个赞 8 人点赞
收藏 13 人收藏
评论 已有 4 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
wocacaca
wocacaca2015-03-30 17:01:554F
不能哦,低版本ie不支持画布的 //@108225693:如果这个能兼容IE8吗
举报 支持 (0) 回复 (0)
108225693
1082256932015-03-27 15:59:403F
如果这个能兼容IE8吗
举报 支持 (0) 回复 (1)
wocacaca
wocacaca2015-03-02 17:51:312F
恩恩,棒棒哒~
举报 支持 (0) 回复 (0)
c626982073
c6269820732015-03-01 16:01:281F
这种刮奖的效果自己之前也做过,原理都差不多,再帮楼主总结,个人认为难点是(楼主没有仔细讲):1.绘制圆形,填充无所谓,原因第二点会讲; 2.ctx.globalCompositeOperation = 'destination-out'; 这个属性是关键,它的作用是,将即将要绘制的圆形的外面的之前绘制完成的画布显示出来,并且将要绘制的圆形透明显示。这个属性还是需要理解的
举报 支持 (0) 回复 (0)
wocacaca wocacaca 作者

快闪开,我要帅炸了!

作者最新