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

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

最初の写真

コード

<!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 を応援していただければ幸いです。

以下もご興味があるかもしれません: