この記事では、クリックするとランダムグラフィックの生成を実現する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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Nginx キャッシュ ファイルと動的ファイルの自動バランス設定スクリプト
>>: Linux での MySQL 5.7.17 の最新安定バージョンのインストール チュートリアル
Web デザインにおけるツリーとは何ですか?簡単に言うと、リンクをクリックするとサブディレクトリが展...
目次1. データベースの概要1.1 開発の歴史2. MySQL の紹介2.1. MySQLの概要2....
目次落とし穴充填方法何の穴ですか?要約する落とし穴最近、仕事で商品の割引価格を計算すると、いつも1セ...
インストール前の作業: VMware Workstation がインストールされていることを確認し、...
目次1. nginx とは何ですか? 2. nginx で何ができるのか? 2.1 フォワードプロキ...
序文ある日、突然 MySQL の次のキー ロックについて尋ねられ、私の即座の反応は次のようなものでし...
最近の Web サイトでは Https をサポートすることがほぼ標準機能となっており、Nginx は...
HTML スタイル タグスタイルタグ - ドキュメント内でスタイルを宣言するときにこのタグを使用しま...
目次1. 実施計画の概要2. 実行計画の実践id:選択タイプ:テーブル:タイプ:可能なキー:鍵:キー...
目次v-model 入力で双方向バインディングデータを使用するコンポーネント内の v-model他の...
インターネット技術の発展に伴い、ユーザーはますます Web ページに依存するようになり、Web フロ...
目次1. 糖衣構文とは何ですか? 2. VUE の構文糖とは何ですか? 1. 最も一般的な構文シュガ...
自分のウェブサイトを構築する予定なので、618 プロモーションを利用して Tencent Cloud...
順序なしリストのアプリケーションネストコードをコピーコードは次のとおりです。 <!DOCTYP...
MySQL を使用する際、フィールドをソートしたりクエリしたりすることがよくあります。通常は、中国語...