キャンバスはスクラッチカード効果を描画します

キャンバスはスクラッチカード効果を描画します

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

最初の写真

コード

<!DOCTYPE html>
<html>
<ヘッド>
 <meta name="keywords" content="Feng Wu Hong Feng、フロントエンドテクノロジー、キャンバス"/>
 <meta name="description" content="Fengwu Hongfeng、フロントエンド技術、Canvas、Vue、React、Node、個人ブログ"/>
 <メタ文字セット="utf-8">
 <title>スクラッチカード</title>
 <link rel="icon" href="../image/icon2.ico" >
 <スタイル タイプ="text/css">
 *{マージン:0;パディング:0;}
 html、本文{高さ:100%;}
 本文{オーバーフロー:hidden;}
 div{位置:絶対;左:0;右:0;上:0;下:0;余白:自動;幅:300px;高さ:150px;テキスト配置:中央;行の高さ:150px;背景:rgb(200,0,0);色:rgb(255,255,255);フォントサイズ:22px;}
 キャンバス{表示: ブロック;位置: 絶対;左: 0;右: 0;上: 0;下: 0;マージン: 自動;フィルター: ぼかし(0.7px);}
 </スタイル>
</head>
<本文>
 <div></div>
 <キャンバス></キャンバス>
</本文>
<script type="text/javascript">
 タグ名で要素を取得する
 var キャンバス = document.getElementsByTagName('キャンバス')[0];
 var コンテキスト = canvas.getContext("2d");

 var Jackpots = ["一等賞","二等賞","三等賞","四等賞","ボーナス賞"];
 //一等賞の確率 2% 二等賞の確率 6% 三等賞の確率 14% 四等賞の確率 30% ボーナス賞の確率 48%
 var ジャックポット = rand(0,49);
 if(ジャックポット == 0){
 div.innerHTML = ジャックポット[0];
 }そうでない場合(ジャックポット>0 && ジャックポット<4){
 div.innerHTML = ジャックポット[1];
 }そうでない場合(ジャックポット>3 && ジャックポット<11){
 div.innerHTML = ジャックポット[2];
 }そうでない場合(ジャックポット>10 && ジャックポット<26){
 div.innerHTML = ジャックポット[3];
 }それ以外{
 div.innerHTML = ジャックポット[4];
 }

 コンテキスト.beginPath();
 context.fillStyle = "rgb(200,200,200)"
 コンテキストを0,0に移動します。
 コンテキスト.lineTo(300,0);
 コンテキスト.lineTo(300,150);
 コンテキスト.lineTo(0,150);
 コンテキスト.lineTo(0,0);
 コンテキストを埋め込む();
 コンテキスト.closePath();

 コンテキスト.beginPath();
 context.font = '30px Arial';
 context.fillStyle = "rgb(255,255,255)"
 context.fillText("スクラッチカード", 110, 90);
 コンテキストを埋め込む();
 コンテキスト.closePath();
 
 var fillColor = ["rgb(255,0,0,0.8)","rgb(255,255,0,0.8)","rgb(255,0,255,0.8)","rgb(0,255,255,0.8)"];
 (var i = 0;i<50;i++){
 コンテキスト.beginPath();
 コンテキストの塗りつぶしスタイル = fillColor[rand(0,3)];
 コンテキスト.arc(rand(20,280),rand(20,130),1,0,2*Math.PI);
 コンテキストを埋め込む();
 コンテキスト.closePath();
 }

 var フラグ = false;
 キャンバス.onmousedown = 関数(){
 フラグ = true;
 }

 キャンバス.onmouseup = 関数(){
 フラグ = false;
 }

 キャンバス.onmousemove = 関数(){
 if(フラグ){
 var e = イベント || window.event;
 var x = e.clientX - parseInt(div.offsetLeft);
 var y = e.clientY - parseInt(div.offsetTop);
 //コンソールログ(x,y);

 コンテキスト.beginPath();
 コンテキスト.arc(x,y,20,0,2*Math.PI);
 context.globalCompositeOperation="destination-out";
 コンテキストを埋め込む();
 コンテキスト.closePath();
 }
 }

 //nからmまでのランダムな整数 function rand(n,m){
 var c = m - n + 1;
 Math.floor(Math.random() * c + n) を返します。
 }
</スクリプト>
</html>

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

以下もご興味があるかもしれません:
  • キャンバスがスクラッチカード効果を実現
  • HTML5 Canvas を使用してスクラッチ カード効果を実現する
  • スクラッチカードの抽選効果を実現する JavaScript+canvas
  • jQuery は、eraser.js プラグインを使用して、カードを消去したり傷をつけたりする効果を実現します [eraser.js のダウンロードあり]
  • モバイル js および html5 スクラッチ カード効果
  • jsとhtml5はモバイルスクラッチカード宝くじ効果を実現し、android / IOSとの完璧な互換性があります

<<:  MySQL無料インストール版のパスワード設定に関する詳細なチュートリアル

>>:  mysql5.7.18.zip インストール不要版設定チュートリアル(Windows)

推薦する

CSS を使用して、画像に 3D の凸型と凹型のエフェクト (フレーム外に凸型、またはフレーム内に凹型) を実現します。

Ⅰ. 問題の説明: CSS を使用して画像の 3D 凸凹効果を実現します。 Ⅱ実施手順は以下のとお...

マークアップ言語 - タイトル

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

nginx 設定チュートリアルにおける add_header の落とし穴の詳細な説明

序文add_header は、headers モジュールで定義されたディレクティブです。名前が示すよ...

MySQL Server 8.0.13.0 インストールチュートリアル(画像とテキスト付き)

MySQL 6.1.3 をベースにした 8.0.13 をインストールします。 MySQL 8.0....

一般的なCSS3アニメーションの実装方法

1. 何ですかCSS アニメーションは、CSS を使用して拡張マークアップ言語 (XML) 要素をア...

Vue3 Vue CLI マルチ環境設定

目次1. はじめに2. 切り替え1. 開発および本番環境の設定ファイルを追加する2. 複数の環境をサ...

Centos7 DockerでNginxファイルを変更するプロセスの詳細な説明

1. docker に nginx をインストールします。 docker に Nginx をインスト...

突然外部ネットワークからDockerにアクセスできなくなる問題の解決方法

マスターのメソッドによると、原因は sysctl net.ipv4.ip_forward であること...

IEのクラッシュバグ

コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...

MySQL エラー「すべての派生テーブルには独自のエイリアスが必要です」の解決方法

MySQL は、マルチテーブルクエリを実行するときにエラーを報告します。 [SQL] SELECT ...

Linux で Ceph 分散ソフトウェアをインストールして使用する方法に関するチュートリアル

目次序文1. 基本環境1. サービス配信2. ネットワーク構成(全ノード) 3. SSHパスワードフ...

MySQLはインデックスプッシュダウンを数秒で理解するのに役立ちます

目次1. インデックスプッシュダウン最適化の原理2. インデックスプッシュダウンの具体的な実践1. ...

WebpackはCSSファイルを読み込み、その設定方法

webpackはCSSファイルとその設定をロードします複数の CSS ファイルを作成した後、HTML...

nginx で複数の仮想ホストを設定する方法の例

nginx で仮想ホスト vhost を設定すると非常に便利です。 nginx設定ファイルnginx...

Kubernetesでポッドを作成する方法

目次ポッドを作成するには? kubectl ツールポッドを作成するには?前回の記事では、コンテナとポ...