JavaScriptはクリックするとランダムなグラフィックを生成します

JavaScriptはクリックするとランダムなグラフィックを生成します

この記事では、クリックするとランダムグラフィックの生成を実現するJavaScriptの具体的なコードを紹介します。具体的な内容は次のとおりです。

クリックするとランダムなグラフィックが生成されます

効果は以下のとおりです。

JavaScriptで実装

主にキャンバスとランダム関数を使用してさまざまなグラフィックを完成させます

最初のステップ

グラフィックが表示される四角形と 2 つのボタンを HTML と CSS で作成します。最初のボタンはグラフィックを生成するために使用され、2 番目のボタンは生成されたすべてのグラフィックをクリアするために使用されます。

<スタイル>
  *{
   マージン: 0;
   パディング: 0;
  }
  #キャンバス{
   境界線: 実線 1px 赤;
   表示: ブロック;
   マージン: 0 自動;
  }
  #父親{
   幅: 200ピクセル;
   マージン:0 自動;
   
  }
  #ボタン{
   右マージン: 40px;
   カーソル: ポインタ;
  }
  #cle{
   カーソル: ポインタ;
  }
</スタイル>
<本文>
 <キャンバスid="キャンバス" 幅="600" 高さ="600"></キャンバス>
 <div id="父">
  <input type="button" id="btn" value="クリックして生成">
  <input type="button" id="cle" value="クリックしてクリア">
 </div>
</本文>

ステップ2

JavaScript で、ランダムな色を設定する関数、クリック時にランダムにグラフィックを生成する関数、クリック時に画面をクリアする関数を作成します。

var キャンバス = document.getElementById("キャンバス");
 var コンテキスト = canvas.getContext("2d");
 var btn = document.getElementById("btn");
 var cle = document.getElementById("cle");

図形のランダムな色を設定する

関数 color(){
  var r = Math.floor(Math.random()*255);
  var g = Math.floor(Math.random()*255);
  var b = Math.floor(Math.random()*255);
  var a = Math.random();
  var bg="rgba("+r+","+g+","+b+","+a+")";
  bg を返します。
 }

ボタンをクリックしたときにランダムにグラフィックを生成する関数を設定します。最初のタイプは塗りつぶされた四角形と白抜きの四角形、2 番目のタイプは塗りつぶされた円と白抜きの円、3 番目のタイプは直線です。それらの位置とサイズをランダムに生成する関数を記述し、context.beginPath()-context closePath() などのグラフィックを描画するキャンバス コードを追加します。

btn.onclick=関数(){
  var ランダム = Math.floor(Math.random()*3+1);
  if(ランダム==1){
   var rectr=Math.floor(Math.random()*2);
   var rectx = Math.floor(Math.random()*600);
   var recty=Math.floor(Math.random()*600);
   var rectwidth=Math.floor(Math.random()*200+200);
   var rectheight=Math.floor(Math.random()*200+200);
   if(rectr== 0){
    コンテキスト.beginPath();
    context.strokeStyle=色();
    context.strokeRect(rectx,recty,rectwidth,rectheight)
    コンテキスト.closePath();
   }
   それ以外 {
    コンテキスト.beginPath();
    context.fillStyle=色();
    context.fillRect(rectx,recty,rectwidth,rectheight);
    コンテキスト.closePath();
   }
  }
  そうでない場合(ランダム == 2){
   var arcr = Math.floor(Math.random()*2);
   var arcx=Math.floor(Math.random()*600);
   var arcy=Math.floor(Math.random()*600);
   var arcr = Math.floor(Math.random()*300);
   (arcr==0)の場合{
    コンテキスト.beginPath();
    context.strokeStyle=色();
    context.arc(arcx,arcy,arcr,0,2*Math.PI,false);
    コンテキスト.stroke();
    コンテキスト.closePath();
   }
  
   それ以外{
    コンテキスト.beginPath();
    context.fillStyle=色();
    context.arc(arcx,arcy,arcr,0,2*Math.PI,false);
    コンテキストを埋め込む();
    コンテキスト.closePath();
   }
  }
  そうでない場合(ランダム==3){
   var movex = Math.floor(Math.random()*600);
   var movey=Math.floor(Math.random()*600);
   var linex = Math.floor(Math.random()*600);
   var liney = Math.floor(Math.random()*600);
   var linew = Math.floor(Math.random()*20);
   コンテキスト.beginPath();
   context.strokeStyle=色();
   コンテキストをmoveTo(movex,movey);
   コンテキストのlineTo(linex,liney);
   context.lineWidth=linew;
   コンテキスト.stroke();
   コンテキスト.closePath();
  }
}

ステップ3

最後に、画面をクリアするためのボタン機能を作成します。作成した画面サイズに応じて、キャンバスにcontext.clearRect(0,0,600,600)を追加して画面をクリアします。

cle.onclick=関数(){
  コンテキスト.beginPath();
  コンテキストをクリアする矩形(0,0,600,600);
  コンテキスト.closePath();
 }

クリックするとランダムなグラフィック効果が生成されます。

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

以下もご興味があるかもしれません:
  • JavaScript 複数グラフィック実装コード例

<<:  Nginx キャッシュ ファイルと動的ファイルの自動バランス設定スクリプト

>>:  Linux での MySQL 5.7.17 の最新安定バージョンのインストール チュートリアル

推薦する

HTML&CSS&JS 互換性ツリー (IE、Firefox、Chrome)

Web デザインにおけるツリーとは何ですか?簡単に言うと、リンクをクリックするとサブディレクトリが展...

1 時間で MySQL データベースを学ぶ (Zhang Guo)

目次1. データベースの概要1.1 開発の歴史2. MySQL の紹介2.1. MySQLの概要2....

JS の toFixed() メソッドの丸め精度の問題の詳細な説明

目次落とし穴充填方法何の穴ですか?要約する落とし穴最近、仕事で商品の割引価格を計算すると、いつも1セ...

VMWare仮想マシンにCentOS7システムをインストールする詳細な手順

インストール前の作業: VMware Workstation がインストールされていることを確認し、...

nginxの基礎を学ぶ

目次1. nginx とは何ですか? 2. nginx で何ができるのか? 2.1 フォワードプロキ...

MySQLのネクストキーロックのロック範囲についての簡単な説明

序文ある日、突然 MySQL の次のキー ロックについて尋ねられ、私の即座の反応は次のようなものでし...

HttpとHttpsの両方をサポートするNginxの詳細な設定

最近の Web サイトでは Https をサポートすることがほぼ標準機能となっており、Nginx は...

HTML スタイル タグと関連する CSS リファレンスの詳細な説明

HTML スタイル タグスタイルタグ - ドキュメント内でスタイルを宣言するときにこのタグを使用しま...

MySQL実行計画を学ぶ

目次1. 実施計画の概要2. 実行計画の実践id:選択タイプ:テーブル:タイプ:可能なキー:鍵:キー...

vue3 コンポーネントでの v-model の使用と詳細な説明

目次v-model 入力で双方向バインディングデータを使用するコンポーネント内の v-model他の...

Webフロントエンド開発コース Webフロントエンド開発ツールとは

インターネット技術の発展に伴い、ユーザーはますます Web ページに依存するようになり、Web フロ...

伝説的な VUE 構文シュガーは何をするのでしょうか?

目次1. 糖衣構文とは何ですか? 2. VUE の構文糖とは何ですか? 1. 最も一般的な構文シュガ...

Pagoda Panel のインストール時にサーバーがデータベースにリモート接続できない問題の解決策

自分のウェブサイトを構築する予定なので、618 プロモーションを利用して Tencent Cloud...

HTML ul 順序なしテーブルのアプリケーションネスト

順序なしリストのアプリケーションネストコードをコピーコードは次のとおりです。 <!DOCTYP...

Mysql 中国語ソートルールの説明

MySQL を使用する際、フィールドをソートしたりクエリしたりすることがよくあります。通常は、中国語...