网页设计 百分网手机站

HTML5中canvas标签实现刮刮卡效果

时间:2017-05-15 网页设计 我要投稿

HTML5中canvas标签实现刮刮卡效果

  你玩过刮刮卡么?一不小心可以中奖的那种。今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果。

  我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的`真实图片,就达到刮刮卡效果。

  HTML

  我们只需要在页面中加入canvas标签元素,其他的就看javascript的了。注意canvas元素是HTML5才有的元素,运行在支持HTML5的现代浏览器上。

  代码如下:

  <canvas></canvas>

  Javascript

  首先,我们要禁用页面的鼠标选中拖动的事件,就是不运行执行选中操作。

  代码如下:

  var bodyStyle = document.body.style;

  bodyStyle.mozUserSelect = 'none';

  bodyStyle.webkitUserSelect = 'none';

  接着我们定义图片类,获取canvas元素,并设置背景和位置属性。我们在本例中用到两张随机照片,每次刷新随机一张图片作为背景。

  代码如下:

  var img = new Image();

  var canvas = document.querySelector('canvas');

  canvas.style.backgroundColor='transparent';

  canvas.style.position = 'absolute';

  var imgs = ['p_0.jpg','p_1.jpg'];

  var num = Math.floor(Math.random()*2);

  img.src = imgs[num];

  然后进入主体,当检测到图片加载完的时候,首先定义一些属性和函数,函数layer()用来绘制一个灰色的正方形,eventDown()定义了按下事件eventUp()定义了松开事件,eventMove()定义了移动事件,其中当按下时,获取坐标位移,并通过arc(x, y, 10, 0, Math.PI * 2)来绘制小圆点。

  代码如下:

  img.addEventListener('load', function(e) {

  var ctx;

  var w = img.width,

  h = img.height;

  var offsetX = canvas.offsetLeft,

  offsetY = canvas.offsetTop;

  var mousedown = false;

  function layer(ctx) {

  ctx.fillStyle = 'gray';

  ctx.fillRect(0, 0, w, h);

  }

  function eventDown(e){

  e.preventDefault();

  mousedown=true;

  }

  function eventUp(e){

  e.preventDefault();

  mousedown=false;

  }

  function eventMove(e){

  e.preventDefault();

  if(mousedown) {

  if(e.changedTouches){

  e=e.changedTouches[e.changedTouches.length-1];

  }

  var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,

  y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;

  with(ctx) {

  beginPath()

  arc(x, y, 10, 0, Math.PI * 2);//绘制圆点

  fill();

  }

  }

  }

  //...

  });

【HTML5中canvas标签实现刮刮卡效果】相关文章:

1.基于html5 canvas实现漫天飞雪效果的方法

2.HTML5中Canvas的事件处理介绍

3.html5的canvas方法使用

4.HTML5的Audio标签使用详解

5.html5使用canvas画三角形

6.用canvas就可以实现图片的滤镜转化代码实现

7.解决html5中video标签无法播放mp4问题

8.14个基于HTML5实现的特效