首頁  >  文章  >  web前端  >  關於canvas的一個實例教學--刮刮樂

關於canvas的一個實例教學--刮刮樂

零下一度
零下一度原創
2017-07-25 09:37:413292瀏覽

今天,結合上一篇文章的抽獎小遊戲,
用canvas來寫一個小遊戲-刮刮樂。
首先,用canvas做一個畫布,寬高各為200px。然後再把一個span標籤定位到畫布上。

關於canvas的一個實例教學--刮刮樂



#          效果如下圖

關於canvas的一個實例教學--刮刮樂



#  接下來取得canvas標籤,定義一個數組,之後用canvas畫一個灰色的正方形把這部分給蓋住。

關於canvas的一個實例教學--刮刮樂



#效果如下

關於canvas的一個實例教學--刮刮樂



關於canvas的一個實例教學--刮刮樂


##用canvas建立一個透明的圓,當滑鼠移動時,清除canvas上的灰色圖層,顯示下面的文字(第一名)。

關於canvas的一個實例教學--刮刮樂


效果如下



關於canvas的一個實例教學--刮刮樂


#最後,我們讓剛開始定義的陣列打亂隨機,然後要清除灰色的圖層時,顯示不同的幾等獎。


關於canvas的一個實例教學--刮刮樂


# 效果如下

########################### ############希望對各位有幫助,謝謝! ###

以上是關於canvas的一個實例教學--刮刮樂的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn