ホームページ > 記事 > ウェブフロントエンド > JS コードを使用して Web スクラッチ カードを作成する
JS コードを使用して Web スクラッチ カードを作成する
- PHP中文网オリジナル
- 2017-06-22 14:37:044552ブラウズ
キャンバスと JS を使用してスクラッチオフ チケットを作成するためのコードを共有します。JS 部分はコメントを削除した 20 行未満のコードです
効果は次のとおりです
Galen.jpg
scratch-off.gif
HTML部分
rreee特に注意する点はありません。エフェクトについては、いくつかの CSS スタイルを追加しました
CSS 部分
<body> <img src="img/gailun.jpg"/> <canvas id="canvas" width="400" height="300"></canvas> </body>
注
1 を追加しました。ブラウザの組み込みエフェクトをクリアするには、グレーの布の下に
<style type="text/css">*{margin: 0;padding: 0;
}img{width: 400px;height: 300px;left: 200px;position: absolute;z-index: -1;
}canvas{margin-left:200px;
}</style>を追加する必要があります。 z-index;
3. 画像の絶対位置
js 部分
ロジックを分析します
1. マウスを押して、対応する領域を移動し、スクレイピングを続けずにマウスの位置を変更しますjsコード
*{margin: 0;padding: 0;
} 注意すべき点1. 画像とキャンバスが左に200px移動するため、円の始点座標は取得位置に対して200px減少します。 2.globalCompositeOperation は、ソース (新規) 画像の描画方法を設定または返すキャンバスの関数です ターゲット (既存) 画像上には、他にも 10 個の書き込みメソッドがあります
以上がJS コードを使用して Web スクラッチ カードを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。