同窗幫幫 h5 刮刮卡組件:Txbb.Scratch

同窗幫幫 h5 刮刮卡組件,簡潔、無依賴,支持 globals 和 amd 兩種調用方式。html

暫時只能用在移動端git

使用方法

<div id="J-Scratch"></div>
var scratchInstance = Txbb.Scratch.attach(element, options);

element

須要初始化的 容器 元素,canvas 元素會被添加進去。github

var scratchInstance = Txbb.Scratch.attach(document.querySelector('#J-Scratch'), options);

options

  • bg(type: String): canvas 所在容器的背景顏色
  • fg(type: String): canvas 元素的顏色,即刮刮卡的顏色
  • middle(type: String): 刮完獎以後顯示的元素,能夠是 html 也能夠是純字符串
  • size(type: Number): 默認 20, 刮一下的半徑
  • onEnd(type: Function): 刮完獎的回調函數

實例方法

  • reset:scratchInstance.reset(options)重置刮刮卡,重置方法傳入options能夠改變實例化時的options

項目主頁:http://www.open-open.com/lib/view/home/1442817103123canvas

相關文章
相關標籤/搜索