/maskcard

A scratchcard plug-in based on canvas.(基于canvas的刮刮卡插件)

Primary LanguageJavaScript

maskcard

This is a scratchcard plug-in based on canvas.

(这是一个基于canvas的刮刮卡插件)

Installation and Usage(安装和使用)

npm install maskcard --save
import Maskcard from 'maskcard'

new Maskcard(element, config)

Example(示例)

【example】

API

Maskcard config

Name type Description Default
fill.type String color or image color
fill.content String When fill.type is color, fill color value
(当fill.type=color时, 填color值)
When fill.type is image, fill image url or base64 encoding
(当fill.type=image时, 填图片地址或者base64编码)
silver
percent Number(Integer between 0 and 100) When xx% auto complete
(刮到xx%时自动清除)
100
radius Number(Integer) The radius of a scratching path
(涂抹笔触半径)
20
disable Boolean Whether disable
(是否禁用)
false
beforeInit Function Called before initialized
(初始化之前调用)
null
inited Function Called after initialized
(初始化之后调用)
null
touchstart Function Called when touchstart, argument: e
(初始化之后调用, 参数: e)
null
touchmove Function Called when touchmove, argument: e
(手指移动的时候调用, 参数: e)
null
touchend Function Called when touchend, argument: e
(手指离开的时候调用, 参数: e)
null
complete Function Called when completed
(刮完时调用)
null

Maskcard methods(函数方法)

Name Description
clear() Complete this scratchcard
(自动刮完)
getProgress() Compute the current scratching progress
(刮到多少百分比)
disable() Disable this scratchcard
(禁用刮刮卡)
enable() Enable this scratchcard
(启用刮刮卡)
changeConfig(config) Change the config and take effect
(修改config)
reset() Reset this scratchcard
(重新初始化)

Attention(注意)

Because the 'getImageData' method on 'CanvasRenderingContext2D' does not support cross-domain, so, when fill.type is image, fill.content image url must follow a master file with the domain name. Otherwise program would change the function auto complete into another function that after 10 to complete.

fill.content图片跨域: 因为canvas中的getImageData方法不支持跨域, 所以当参数fill.type=image时, fill.content填的图片地址必须与主文件同域, 否则程序会把自动涂抹功能改为刮了【percent/10】次之后自动抹去.