最近項目剛好用到這種效果，也就是有點像刮刮卡一樣，在移動設(shè)備上，把某張圖片刮掉顯示出另一張圖片。效果圖如下：

DEMO請戳右：DEMO 
這種在網(wǎng)上還是挺常見的，本來就想直接網(wǎng)上找個demo套用下他的方法就行了，套用了才發(fā)現(xiàn)，在android上卡出翔了，因為客戶要求，在android不要求特別流暢，至少要能玩，但是網(wǎng)上找的那個demo實在太卡，根本就是沒法玩的情況。于是就想自己寫一個算了，本文也就權(quán)當(dāng)記錄一下研究過程。

　　這種刮圖的效果，首先想到就是用HTML5的canvas來實現(xiàn)，而canvas的API中，可以清除像素的就是clearRect方法，但是clearRect方法的清除區(qū)域矩形，畢竟大部分人的習(xí)慣中的橡皮擦都是圓形的，所以就引入了剪輯區(qū)域這個強大的功能，也就是clip方法。用法很簡單：　

發(fā)表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發(fā)表