この記事では、キャンバスでスクラッチカード効果を描画するための具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 最初の写真 コード <!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)
MySQL 4.x 以降では、全文検索 MATCH ... AGAINST モード (大文字と小文字...
1. コントロールパネルで、MySQLのすべてのコンポーネントをアンインストールします。コントロール...
前のこれは古くからある古典的な質問です。以前読者から質問があったので、ここでお答えします。簡単な例か...
MySQL 5.7.17 のインストールと設定方法の概要最初のステップは、MySQL公式サイトから...
目次1. 環境設備2. ToastコンポーネントとToastServiceを作成する2.1 Toas...
MySQL 起動エラーWindows 10 に MySQL をインストールする前は、net star...
Arthas はあなたのために何ができるでしょうか? Arthas 、開発者に深く愛されている Al...
Linux は iftop を使用してネットワーク カードのトラフィックをリアルタイムで監視します。...
nginx (エンジン x) は、高性能な HTTP およびリバース プロキシ サーバー、メール プ...
落とし穴1. ネット上の多くのチュートリアルでは環境変数を設定するファイル名はmy.iniと書いてあ...
目次502 不正なゲートウェイ エラーの発生1. 502 不正なゲートウェイ エラーとは何ですか? ...
目次1. プロトタイプとは何ですか? 2. プロトタイプ__プロト__ 4. コンストラクター5. ...
今日システムを再インストールした後、コンピューターに mysql を再インストールし、ZIP ファイ...
一言で言えば、大手メーカーからクラウド サーバーを購入する場合は、セキュリティ グループに移動して、...
イメージをプルし、コンテナを作成してコンテナを実行するだけです。 docker run -d --r...