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 の title 属性を正しく使用するためのヒント

コンテンツを携帯電話、タブレット、支援技術のユーザーから非表示にし、キーボードのユーザーにのみ表示す...

MYSQLでリモートアクセス権限を有効にする方法

1. MySQLデータベースにログインするmysql -u ルート -pユーザーテーブルを表示する ...

LeetCode の SQL 実装 (196. 重複するメールボックスを削除する)

[LeetCode] 196.重複したメールを削除するSQL クエリを記述して、Person とい...

17 個の JavaScript ワンライナー

目次1. DOMとBOM関連1. 要素にフォーカスがあるかどうかを確認する2. 要素の兄弟ノードをす...

vscodeを使用してReact Native開発環境を構築する方法を教えます

質問コードにはプロンプトがありません: RN 開発に不慣れな、フロントエンド以外の学生の多くは、「ど...

Reactにおける制御されたコンポーネントと制御されていないコンポーネントの簡単な分析

目次制御されていないコンポーネント制御コンポーネント知らせ結論は制御されていないコンポーネントフォー...

MySQL 8.x msi バージョンのインストール チュートリアル (画像とテキスト付き)

1. MySQLをダウンロードする公式サイトのダウンロードアドレス https://dev.mys...

CentOS7 で yum を使用して PostgreSQL と PostGIS をインストールする方法

1. yumソースを更新するCentOS7 のデフォルトの yum リポジトリの PostgreSQ...

HTML マークアップ言語 - フォーム

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

Tomcat で複数の war パッケージを展開する方法と手順

1 背景JDK1.8-u181とTomcat8.5.53がインストールされました。インストール後、環...

Mysql のデッドロックの表示とデッドロックの除去の詳細な説明

序文しばらく前にMysqlのデッドロック問題に遭遇したので、解決しました。問題の説明: Mysql ...

1分でVueが右クリックメニューを実装

目次レンダリングインストールコードの実装カスタムスタイル要約する効率的に要件を満たし、車輪の再発明を...

TypescriptとAxiosに基づくインターフェースリクエスト管理の詳細な説明

目次アイデア傍受を要求するレスポンスインターセプションhttpClient.tsを使用してリクエスト...

Linux の RPM パッケージでインストールされた xinetd ベースのサービスの管理

目次序文1. xinetdサービスに基づく起動管理(1)Telnetサービスのインストール(2)Te...

1つの記事でJSONPの原理と応用を理解する

目次JSONPとはJSONP 原則JSONP実装1. Ajaxでクロスドメインリクエストが行われると...