誰もがスクラッチ チケットで遊んだことがあると思います。子供の頃、ポケットにお金が入るとすぐに友達に電話して、家の近くの店に走って行きました。しわくちゃになった 50 セントを柔らかい手で店主に渡し、大きな期待を抱きながらチケットをスクラッチしました。100 元当たったら、辛いお菓子、カード、こま、Audi Double Diamond ヨーヨーをたくさん買おうと、すでに心の中で考えていました... この記事をしっかり読めば、彼女の美しい写真を使ってあなただけのスクラッチカードを手に入れることができますよ! (もちろん、彼女がいないという方は長年集めてきた美女の写真を使うこともできます!) ⛳️HTML、CSS、JavaScriptを使用してスクラッチカード/スクラッチ宝くじを実装する心配しないで、まずはデモを見てください HTML、CSS、JavaScript を使用してスクラッチ宝くじを実装する ステップ1: スクラッチカードの基本構造を作成する ステップ 2: 画像をキャンバス上に配置します (スクラッチ カードの最下層として)。 ステップ3: スクラッチカードカバーの作り方 ステップ4:スクラッチフィルムに「削ってください」という文字を作成する方法 ステップ5: JavaScriptを使用してスクラッチカードをアクティブ化する 完了です。これで独自のスクラッチ カードを使用できるようになりました。 初心者向けチュートリアル: ♥️心配しないで、まずはデモを見てくださいスクラッチ宝くじ
💎HTML、CSS、JavaScriptを使用してスクラッチチケットを実装する
これを行うには、まず HTML ファイルを作成する必要があります。 🎉ステップ1: スクラッチカードの基本構造を作成するこのスクラッチ カードのデザインに関して、このブロガーはフロントエンドで非常に人気のあるテクノロジーであるキャンバスを使用しました。 ここではキャンバスを使用しているため、簡単に説明する必要があります。キャンバスは JavaScript を使用して Web ページに画像を描画します。描画キャンバス領域は長方形の領域であり、その中のすべてのピクセルを制御して、必要な描画効果を実現できます。これが、このブロガーがこれを使用している理由でもあります。キャンバスを深く学びたい方は、こちらの記事をお読みください - 「20分でキャンバスを学べるように、妹に遅くまで起きて、この記事と小さなプロジェクトに一生懸命取り組みました[❤️ おすすめコレクション ❤️]」
<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="UTF-8"> <title>スクラッチ宝くじ</title> <スタイル タイプ="text/css"> #c1{ 境界線: 1px 青 } </スタイル> </head> <本文> <キャンバスid="c1" 幅="960" 高さ="1440"></キャンバス> </本文> </html> デモンストレーション効果: 🎅ステップ 2: 画像をキャンバスに置きます (スクラッチ カードのベースとして)
<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="UTF-8"> <title>スクラッチ宝くじ</title> <スタイル タイプ="text/css"> #c1{ 境界線: 1px 青 } </スタイル> </head> <本文> <キャンバスid="c1" 幅="960" 高さ="1440"></キャンバス> </本文> <script type="text/javascript"> // ステップ 1: キャンバス オブジェクトを一致させる var c1 = document.getElementById("c1"); //ステップ 2: キャンバスのコンテキストを取得します。var ctx1 = c1.getContext("2d"); //getContext("2d") オブジェクトは、パス、四角形、円、文字を描画したり、画像を追加したりするための複数のメソッドを備えた組み込みの HTML5 オブジェクトです。 //画像オブジェクトを作成します。var imgs = new Image(); //画像パスを指定 imgs.src = 'img/girl.jpg' // 注意: 画像はキャンバスに直接配置できません。.onload イベントを介して読み込む必要があります。そうしないと、画像が完全に読み込まれないため、キャンバスに表示されない場合があります。imgs.onload = function(){ // パラメータ: 画像、開始 x 座標、開始 y 座標、最後の 2 つのパラメータはサイズを指定します (サイズ比は元の画像比と一致することをお勧めします) // 最後の 2 つのパラメータが指定されていない場合は、デフォルトで元の画像が 1:1 で描画され、表示できないコンテンツは表示されなくなります。 ctx1.drawImage(これ、0,0,960,1440) // 拡張使用法: //jb.drawImage(これ、200、200、300、300、0、0、1078、1881) // 200,200,300,300 は画像の左上から右下の領域の切り抜きを決定します。次の 4 つの座標は描画領域の左上と右下の座標を表します } </スクリプト> </html> デモンストレーション効果: 🎃ステップ3: スクラッチカードのカバーフィルムの作り方
<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="UTF-8"> <title>スクラッチ宝くじ</title> <スタイル タイプ="text/css"> #c1{ 境界線: 1px 青 位置: 絶対; } #c2{ 境界線: 1px 実線の赤; } 体{ 位置: 相対的; } </スタイル> </head> <本文> <キャンバスid="c1" 幅="960" 高さ="1440"></キャンバス> <キャンバスid="c2" 幅="960" 高さ="1440"></キャンバス> </本文> <script type="text/javascript"> var c1 = document.getElementById("c1"); var c2 = document.getElementById("c2"); var ctx1 = c1.getContext("2d"); var ctx2 = c2.getContext("2d"); // 画像をキャンバスに描画する2 var imgs = 新しい画像(); 画像ギャラリー imgs.onload = 関数(){ ctx2.drawImage(これ、0,0) } // コーティングを最上層(つまりカバーフィルム)に描画します canvas1 ctx1.fillStyle = "ライトグレー"; ctx1.fillRect(0,0,960,1440); </スクリプト> </html> デモンストレーション効果: 上記のコードは、タイル状のスクラッチ カードの基になる画像のキャンバスの絶対位置を設定し、その親の body タグの相対位置を設定していることに注意してください (これは、フロント エンドでよく言われるように、親は子に対して相対的です)。 相対的な位置決めと絶対的な位置決めについて、簡単に説明します(理解できるはずです)。
🎈ステップ4:スクラッチフィルムに「削ってください」という文字を書く方法次の JavaScript コードを追加するだけです。 //パラメータ: 通常フォント/斜体フォント サイズ Microsoft YaHei/FangSong 通常: 通常フォント/斜体: 斜体 ctx1.font = "通常 80px FangSong"; //フォントのアウトラインの色 ctx1.strokeStyle = "slateblue"; //テキストを描画します(白抜き) パラメータ:テキスト、左上隅のx座標、左上隅のy座標 ctx1.strokeText("Please scrap it!",320,750); デモンストレーション効果: 👻ステップ5: JavaScriptを使用してスクラッチチケットを有効化する
ちなみに、このスクラッチ カードは、マウスをクリックした後にマウスが移動する 50 ピクセル x 50 ピクセルの領域のカバー フィルムを継続的にクリアするように設計されています。マウスのクリックを解除してもクリアされなくなりました。したがって、最初にキャンバスのマウス クリック イベントをリッスンし、マウス クリック イベントがキャプチャされたら、マウス移動イベントをリッスンします。マウス移動イベントには、クリア関数が含まれています。マウスを離すとクリア機能がオフになります! // キャンバスの onmousedown イベント (つまりマウス クリック イベント) をリッスンします。 c1.onmousedown = 関数(ev){ c1.onmousemove = function(e){ //キャンバスのonmousemoveイベント(マウス移動イベント)をリッスンします コンソールログ(e); var w = 50; // クリア領域の幅 var h = 50; // クリア領域の高さ var x = e.pageX-c1.offsetLeft - w/2; // クリア領域の x 位置 var y = e.pageY-c1.offsetTop - h/2; // クリア領域の y 位置 ctx1.clearRect(x,y,w,h); } } // マウスの onmouseup イベント (つまり、マウスのリリース イベント) をリッスンします。 c1.onmouseup = 関数(ev){ //onmousemove イベントをキャンセル c1.onmousemove = null; } 💝完了——デザインしたスクラッチ カードが使用できるようになりました。 🏄完全な初心者向けチュートリアル:
<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="UTF-8"> <title>スクラッチ宝くじ</title> <スタイル タイプ="text/css"> #c1{ 境界線: 1px 青 位置: 絶対; } #c2{ 境界線: 1px 実線の赤; } 体{ 位置: 相対的; } </スタイル> </head> <本文> <キャンバスid="c1" 幅="960" 高さ="1440"></キャンバス> <キャンバスid="c2" 幅="960" 高さ="1440"></キャンバス> </本文> <script type="text/javascript"> var c1 = document.getElementById("c1"); var c2 = document.getElementById("c2"); var ctx1 = c1.getContext("2d"); var ctx2 = c2.getContext("2d"); // 画像をキャンバスに描画する2 var imgs = 新しい画像(); 画像ギャラリー imgs.onload = 関数(){ ctx2.drawImage(これ、0,0) } // コーティングを最上層(つまりカバーフィルム)に描画します canvas1 ctx1.fillStyle = "ライトグレー"; ctx1.fillRect(0,0,960,1440); ctx1.font = "通常の80pxファングソング"; ctx1.strokeStyle = "スレートブルー"; ctx1.strokeText("掻いてください!",320,750); // キャンバスのonmousedownイベントをリッスンします c1.onmousedown = function(ev){ c1.onmousemove = 関数(e){ コンソールログ(e); var w = 50; // クリア領域の幅 var h = 50; // クリア領域の高さ var x = e.pageX-c1.offsetLeft - w/2; // クリア領域の x 位置 var y = e.pageY-c1.offsetTop - h/2; // クリア領域の y 位置 ctx1.clearRect(x,y,w,h); } } c1.onmouseup = 関数(ev){ //onmousemove イベントをキャンセル c1.onmousemove = null; } </スクリプト> </html> この記事から何かを学んで、気に入っていただけたなら、光栄です。この記事を友人と共有したり、いいねやブックマークをしていただければ幸いです。また、読者の皆様はコメント欄でテクノロジーについて議論したり、率直な意見を述べたりしていただければ幸いです。 この記事はここまでです。初めまして、パソコン好きの少年【孤寒者】です! 🌹 これで、HTML+CSS+JavaScript でガールフレンドバージョンのスクラッチカードを作る方法についての記事は終了です (一目でわかるようになっています)。HTML+CSS+JavaScript のスクラッチカードに関するその他のコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: VMware vSphere6.0 サーバー仮想化の展開とインストールの図 (詳細な手順)
>>: MySql クライアントが数秒で終了する問題を解決する (my.ini が見つからない)
HTML イベント リスト一般イベント: onClick HTML: マウスクリックイベント。主にオ...
この問題を理解する前に、まず MySQL テーブルのストレージ構造を確認し、次にバイナリ ツリー、マ...
1. 戻るボタンhistory.back() を使用してブラウザの「戻る」ボタンを作成します。 &l...
Ubuntu 20.04は2020年4月に正式にリリースされました。本日、ミラーシステムを正式にイン...
目次フロントエンド上記のアイデアに従って、ページめくり機能を設計して記述します。バックエンド(Jav...
MySQLの重複排除方法【初級】繰り返しのセリフが少ないdistinctive を使用してそれらを見...
NginxのGeoモジュールの紹介geo ディレクティブは、ngx_http_geo_module ...
公式 MySQL Web サイトから Ubuntu Linux 用の最新バージョンの MySQL を...
問題の再現HTML を使用して編集する場合、特殊記号によってエラーが表示されることが多く、極端な場合...
この記事では、動的なパーティクル効果を実現するためのjQueryの具体的なコードを参考までに紹介しま...
Docker プライベートイメージライブラリDockerプライベートイメージライブラリとAlibab...
導入この記事は、 React + antdをベースにして、完全な全屏demoを紹介します。その理由は...
必要なときにサービスを有効にし、必要がないときは無効にします。データベース サービスを管理する方法:...
ミラーリングも Docker のコアコンポーネントの 1 つです。ミラーリングはコンテナ操作の基盤で...
序文比較的複雑な大規模システムでは、複雑なロジックで処理する必要があるオブジェクトまたはデータ フロ...