Mmemo

PC作業に関する覚書やweb制作記録。
無料で使える便利ツールやwebアプリも制作。サイト上(ブラウザ上)で動作。

canvasを利用してスクラッチカードを作る

概要

下の層には画像を置き、上の層にはcanvasで銀色の円を描画することでスクラッチカードを再現。
当たりは6個のうち2個。一箇所を削ると他の箇所は削れなくなる。
セキュリティは皆無なのでお遊び用途として。

スマホ等のタッチの場合は、canvasの外側から内側にタッチしながら動かしてもtouchmoveイベントが発火しないため、 タッチの起点をcanvas内(銀の部分)にしないと削ることが出来ない。
この点に関しては調べたがどうすることも出来なかった。

本体

準備中

コード

折りたたみ