支持移动手机的canvas刮刮卡插件

黄舟
Release: 2017-01-18 14:34:19
Original
1280 people have browsed it

简要教程

ScratchCard是一款支持移动手机的HTML5 canvas刮刮卡插件。该刮刮卡插件支持移动触摸事件,提供刮卡的回调函数,简单易用,效果非常不错。

使用方法

在页面中引入Scratch.js文件。

Copy after login

HTML结构

使用下面的HTML结构来制作一个刮刮卡:

Copy after login

CSS样式

为刮刮卡添加下面的CSS样式。

.scratch_container {
  position: relative;
  margin: 0 auto;
  max-width: 1024px;
}
 
.scratch_viewport {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  z-index: 0;
}
 
.scratch_picture-under {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  z-index: -1;
}
 
.scratch_container canvas {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
}
Copy after login

初始化插件

在页面页面底部标记结束之前,使用下面的代码来实例化一个刮刮卡对象。

var scratch = new Scratch({
    canvasId: 'js-scratch-canvas',
    imageBackground: 'loose.jpg',
    pictureOver: 'foreground.jpg',
    cursor: {
        png: 'piece.png',
        cur: 'piece.cur',
        x: '20',
        y: '17'
    },
    radius: 20,
    nPoints: 100,
    percent: 50,
    callback: function () {
      alert('I am Callback.');
    },
    pointSize: { x: 3, y: 3}
});
Copy after login

配置参数

该Canvas刮刮卡插件的可用配置参数有:

  • canvasId:canvas的id。

  • imageBackground:背景图片(刮开后呈现的图片)。

  • pictureOver:前景图片。

  • sceneWidth:canvas的宽度。

  • sceneHeight:canvas的高度。

  • radius:清除区域的半径。

  • nPoints:清除区域的杂点数量。

  • percent:在清除多少区域之后清空canvas。

  • cursor:光标。

  • png:png格式的光标。

  • x:Move position x。

  • y:Move position y。

  • cur:cur格式的光标(IE使用)。

ScratchCard canvas刮刮卡插件的github地址为:https://github.com/Masth0/ScratchCard

以上就是支持移动手机的canvas刮刮卡插件的内容,更多相关内容请关注PHP中文网(www.php.cn)!


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]
Latest Issues
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!