スクラッチ宝くじの例を実現する JavaScript キャンバス

スクラッチ宝くじの例を実現する JavaScript キャンバス

この記事では、スクラッチ効果を実現するためのJavaScriptキャンバスの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

レンダリング

HTMLコード:

<div class="ggk">
        <span id="span">200元</span>
        <キャンバスid="キャンバス"></キャンバス>
</div>

CSSコード:

.ggk {
            幅: 200ピクセル;
            高さ: 100px;
            境界線: 1px実線 #000;
            マージン: 20px 自動;
            色: 赤;
            位置: 相対的;
        }
 
        .ggk スパン {
            位置: 絶対;
            幅: 100%;
            高さ: 100%;
            テキスト配置: 中央;
            フォントサイズ: 50px;
            行の高さ: 100px;
        }
 
        #キャンバス {
            位置: 絶対;
            左: 0;
            上: 0;
        }

jsコード:

var キャンバス = document.getElementById("キャンバス")
        初期化()
        関数init() {
            キャンバスの幅 = 200;
            キャンバスの高さ = 100;
            var ctx = canvas.getContext("2d")
            // グレーのレイヤーでカバーする ctx.save();
            ctx.fillStyle = 'rgb(100,100,100)'
            ctx.fillRect(0, 0, 200, 100)
            描画(ctx)
            プロ()
        }
 
        // ランダムコンテンツ function pro() {
            var span = document.getElementById("span")
            var arr = ["100元", 'ご愛顧ありがとうございます', '200元', 'ご愛顧ありがとうございます', 'ご愛顧ありがとうございます', 'ご愛顧ありがとうございます', '500万', 'ご愛顧ありがとうございます']
            var num = Math.floor(Math.random() * (arr.length - 1))
            var テキスト = arr[数値]
            span.innerHTML = テキスト
        }
 
        関数draw(ctx){
            //クリックイベント canvas.onmousedown = function(e){
                // 移動イベント var downX = e.offsetX
                var 下Y = e.offsetY
                ctx.beginPath()
                // ctx.globalCompositeOperation = 'destination-out'
                ctx.lineWidth = 10;
                ctx.moveTo(下X、下Y)
 
                キャンバス.onmousemove = 関数(e){
                    var x = e.offsetX
                    var y = e.offsetY
                    // ctx.lineTo(x,y)
                    ctx.clearRect(x,y,20,20)
                    ctx.ストローク()
 
                }
            }
            // マウスポップアップイベント canvas.onmouseup = function(){
                キャンバス.onmousemove = null
            }
        }

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • HTML+CSS+JavaScript でガールフレンド版のスクラッチ カードを作成します (一度見ればすぐに覚えられます)
  • スクラッチ効果を実現するJavaScript
  • スクラッチチケットを実装するためのネイティブJavaScript
  • ウェブスクラッチ宝くじの効果を実現する20行のJSコード
  • モバイル デバイスでスクラッチ カードを実装する方法 (js+HTML5)
  • js HTML5 モバイル スクラッチ コード

<<:  Dockerイメージが消える問題を解決する

>>:  MySQL でのトリガーとカーソルの紹介と使用

推薦する

MySQL 5.7 における基本的な JSON 操作ガイド

序文プロジェクトのニーズにより、ストレージ フィールドは JSON 形式で保存されます。プロジェクト...

JSにおけるデータ型の正しい判定方法の例

目次序文typeof は型を正しく判別できますか? instanceof は型を正しく判別できますか...

JPQLに基づく純粋なSQL文方式の詳細な説明

JPQL は Java Persistence Query Language の略です。 Java ...

GIFアニメーション効果を模倣した自動ビデオ再生を実現するWeChatアプレットの例

需要背景:ミニプログラムページに GIF ダイナミック画像を挿入しますが、GIF 画像は通常サイズが...

PrometheusはGrafanaディスプレイを使用してMySQLを監視します

目次Prometheusはエクスポーターを介してMySQLを監視し、Grafanaチャートで表示しま...

JavaScript offsetParent のケーススタディ

1. offsetParentの定義: offsetParentは子要素に最も近い位置に配置された親...

Zabbixを使用してOracleテーブルスペースの操作プロセスを監視する

0. 概要Zabbix は非常に強力なオープンソースの監視ツールです。以下では、Zabbix がテー...

MySQL の 4 つのトランザクション分離レベルの詳細な説明

この実験のテスト環境: Windows 10+cmd+MySQL5.6.36+InnoDB 1. ト...

nginx と keepalived を組み合わせて高可用性を実現するための手順を完了する

序文システムの高可用性を満たすためには、通常、クラスターを構築する必要があります。ホストがクラッシュ...

フロア効果を実現するためのJavaScript

この記事では、フロア効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。...

mysqlのkey_lenの計算方法についての簡単な説明

MySQL の explain コマンドは SQL のパフォーマンスを分析できます。その 1 つが ...

k8s に ingress-nginx をデプロイする手順

目次序文1. Ingressの展開と構成2. httpsを使用する序文k8sクラスタサービスがデプロ...

TypeScript 環境を構築して VSCode にデプロイする詳細な手順

目次TypeScript環境の構築ステップ1: Taobaoミラーをダウンロードするステップ2: T...

vue3のテレポート瞬間移動機能の使い方を詳しく解説

vue3テレポート瞬間移動機能の使用は参考用です。具体的な内容は次のとおりです。テレポートは通常、瞬...