当前位置：首页 > 网页特效 > canvas

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

分类：canvas 日期：2024-05-14 点击(0) 评论(0)

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

简介

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

```html
<script type="text/javascript" src="js/Scratch.js"></script>  
```          
#####  HTML结构
使用下面的HTML结构来制作一个刮刮卡：

```html
<div class="scratch_container">
  <div class="scratch_viewport">
    
    <canvas id="js-scratch-canvas"></canvas>
  </div>
</div>    
```            
#####  CSS样式
为刮刮卡添加下面的CSS样式。

```html
.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;
}            
```       
#####  初始化插件
在页面页面底部body标记结束之前，使用下面的代码来实例化一个刮刮卡对象。

```html
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}
});
```
#####  配置参数
该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使用）。

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果