この記事では、キャンバスでスクラッチカード効果を描画するための具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 最初の写真 コード <!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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL無料インストール版のパスワード設定に関する詳細なチュートリアル
>>: mysql5.7.18.zip インストール不要版設定チュートリアル(Windows)
Ⅰ. 問題の説明: CSS を使用して画像の 3D 凸凹効果を実現します。 Ⅱ実施手順は以下のとお...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
序文add_header は、headers モジュールで定義されたディレクティブです。名前が示すよ...
MySQL 6.1.3 をベースにした 8.0.13 をインストールします。 MySQL 8.0....
1. 何ですかCSS アニメーションは、CSS を使用して拡張マークアップ言語 (XML) 要素をア...
目次1. はじめに2. 切り替え1. 開発および本番環境の設定ファイルを追加する2. 複数の環境をサ...
1. docker に nginx をインストールします。 docker に Nginx をインスト...
マスターのメソッドによると、原因は sysctl net.ipv4.ip_forward であること...
コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...
MySQL は、マルチテーブルクエリを実行するときにエラーを報告します。 [SQL] SELECT ...
目次序文1. 基本環境1. サービス配信2. ネットワーク構成(全ノード) 3. SSHパスワードフ...
目次1. インデックスプッシュダウン最適化の原理2. インデックスプッシュダウンの具体的な実践1. ...
webpackはCSSファイルとその設定をロードします複数の CSS ファイルを作成した後、HTML...
nginx で仮想ホスト vhost を設定すると非常に便利です。 nginx設定ファイルnginx...
目次ポッドを作成するには? kubectl ツールポッドを作成するには?前回の記事では、コンテナとポ...