この記事では、クリックするとランダムグラフィックの生成を実現する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 の最新安定バージョンのインストール チュートリアル
コンテンツを携帯電話、タブレット、支援技術のユーザーから非表示にし、キーボードのユーザーにのみ表示す...
1. MySQLデータベースにログインするmysql -u ルート -pユーザーテーブルを表示する ...
[LeetCode] 196.重複したメールを削除するSQL クエリを記述して、Person とい...
目次1. DOMとBOM関連1. 要素にフォーカスがあるかどうかを確認する2. 要素の兄弟ノードをす...
質問コードにはプロンプトがありません: RN 開発に不慣れな、フロントエンド以外の学生の多くは、「ど...
目次制御されていないコンポーネント制御コンポーネント知らせ結論は制御されていないコンポーネントフォー...
1. MySQLをダウンロードする公式サイトのダウンロードアドレス https://dev.mys...
1. yumソースを更新するCentOS7 のデフォルトの yum リポジトリの PostgreSQ...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
1 背景JDK1.8-u181とTomcat8.5.53がインストールされました。インストール後、環...
序文しばらく前にMysqlのデッドロック問題に遭遇したので、解決しました。問題の説明: Mysql ...
目次レンダリングインストールコードの実装カスタムスタイル要約する効率的に要件を満たし、車輪の再発明を...
目次アイデア傍受を要求するレスポンスインターセプションhttpClient.tsを使用してリクエスト...
目次序文1. xinetdサービスに基づく起動管理(1)Telnetサービスのインストール(2)Te...
目次JSONPとはJSONP 原則JSONP実装1. Ajaxでクロスドメインリクエストが行われると...