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

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

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

最初の写真

コード

<!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)

推薦する

MySQL 全文あいまい検索 MATCH AGAINST メソッドの例

MySQL 4.x 以降では、全文検索 MATCH ... AGAINST モード (大文字と小文字...

WindowsシステムでMySQLデータベースを完全にアンインストールして、MySQLを再インストールします

1. コントロールパネルで、MySQLのすべてのコンポーネントをアンインストールします。コントロール...

CSS マージンの折りたたみの詳細な説明

前のこれは古くからある古典的な質問です。以前読者から質問があったので、ここでお答えします。簡単な例か...

MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル (Windows10)

MySQL 5.7.17 のインストールと設定方法の概要最初のステップは、MySQL公式サイトから...

Angular CDK を使用してサービスポップアップトーストコンポーネント機能を実装する

目次1. 環境設備2. ToastコンポーネントとToastServiceを作成する2.1 Toas...

Windows システムで MySQL が起動しない場合の一般的な解決策

MySQL 起動エラーWindows 10 に MySQL をインストールする前は、net star...

DockerコンテナでArthasを使用するための詳細な手順

Arthas はあなたのために何ができるでしょうか? Arthas 、開発者に深く愛されている Al...

Linuxはiftopを使用してネットワークカードのトラフィックをリアルタイムで監視します

Linux は iftop を使用してネットワーク カードのトラフィックをリアルタイムで監視します。...

Linux システムでの nginx サーバーのインストールと負荷分散構成の詳細な説明

nginx (エンジン x) は、高性能な HTTP およびリバース プロキシ サーバー、メール プ...

MySQL 8.0.15 バージョンのインストールチュートリアル Navicat.list への接続

落とし穴1. ネット上の多くのチュートリアルでは環境変数を設定するファイル名はmy.iniと書いてあ...

フロントエンド例外 502 不正なゲートウェイの原因と解決策

目次502 不正なゲートウェイ エラーの発生1. 502 不正なゲートウェイ エラーとは何ですか? ...

JavaScript プロトタイプとプロトタイプチェーンの深い理解

目次1. プロトタイプとは何ですか? 2. プロトタイプ__プロト__ 4. コンストラクター5. ...

mysql8.0.14.zip のインストール中にデータ フォルダを自動的に作成できませんでした。サービスを開始できません。

今日システムを再インストールした後、コンピューターに mysql を再インストールし、ZIP ファイ...

Alibaba Cloud Centos7.X で外部にポートを開く方法

一言で言えば、大手メーカーからクラウド サーバーを購入する場合は、セキュリティ グループに移動して、...

Dockerコンテナの構築と実行のプロセスの詳細な説明

イメージをプルし、コンテナを作成してコンテナを実行するだけです。 docker run -d --r...