この記事では、JavaScriptでキャンバスを使用して座標と線を描く具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 具体的なコードは次のとおりです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>指定された位置に複数の点を描画します</title> <スタイル> キャンバス{ 境界線: 1px 破線グレー; } </スタイル> </head> <本文> <キャンバスid="cvs" 幅="500" 高さ="500"></キャンバス> </本文> </html> jsコード: <スクリプト> var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d'); // 座標軸とキャンバスの右下と左下の余白の間の距離 var padding = { トップ:20, 右:20, 下:20, 残り:20 } // 座標軸の矢印の幅と高さ var arrow = { 幅:12, 高さ:20 } // 座標軸上の頂点の座標を見つける var vertexTop = { x:パディング.左、 y:パディング.上 } // 座標軸の原点の座標を見つける var origin = { x:パディング.左、 y:cvs.height - padding.bottom } // 座標軸の右頂点の座標を見つける var vertexRight = { x:cvs.width - padding.left、 y:cvs.height - padding.bottom } // 線の幅を設定 ctx.lineWidth = 2; //座標軸の2本の線を描画します ctx.beginPath(); ctx.moveTo(頂点の x 座標、 頂点の y 座標); ctx.lineTo(原点x、原点y); ctx.lineTo(頂点右端の x と y ); ctx.stroke(); //矢印の描き方//上に矢印を描く// ^ // | // | ctx.beginPath(); ctx.moveTo(頂点トップのx、頂点トップのy); ctx.lineTo(頂点の x - 矢印の幅/2、頂点の y + 矢印の高さ); ctx.lineTo(頂点の x 軸、 頂点の y 軸 + 矢印の高さ / 2); ctx.lineTo(頂点の x 軸 + 矢印の幅/2、頂点の y 軸 + 矢印の高さ)。 ctx.fill(); // 右側に矢印を描画します // ---> ctx.beginPath(); ctx.moveTo(頂点右.x、頂点右.y); ctx.lineTo(頂点右のx - 矢印の高さ、頂点右のy - 矢印の幅); ctx.lineTo(頂点右.x - 矢印の高さ/2、頂点右.y); ctx.lineTo(vertexRight.x - arrow.height,vertexRight.y + arrow.width); ctx.fill(); /* * 座標軸上の指定された位置に点を描画します。座標アルゴリズム: * 点の x 軸: 原点の x 座標 + 点から原点までの水平距離 * 点の y 軸: 原点の y 座標 - 点から原点までの垂直距離 */ //ポイントの座標を定義します var points = [[10,10],[50,50],[90,90],[130,130],[170,170],[200,200]]; // 座標に点を描画し、ループを使用して配列内の座標を反復処理します // 色を設定します ctx.fillStyle = "green"; points.forEach(function(arr){ ctx.fillRect(origin.x + arr[0],origin.y - arr[1],5,5); }); // ポイントに基づいて線を接続します // 再描画を防ぎます ctx.beginPath(); ctx.lineWidth = 2; ctx.strokeStyle = "黄色"; points.forEach(関数(arr) { ctx.lineTo(origin.x + arr[0] + 1.8、origin.y - arr[1] + 1.8); }); //Strokeectx.stroke(); </スクリプト> 効果は以下のとおりです。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Nginx 構成検出サービスのステータスを実装する方法
Linux システムでは、ユーザーが手動で作成したさまざまなアカウントに加えて、システムまたはプログ...
目次概要1. メニューとルーティング処理2. メニューとルートリスト3. ログインプロセスの処理概要...
オンラインで検索して重複データを削除し、ID が最小のデータだけを残します。方法は次のとおりです。 ...
1. 仮想マシンとgit bashウィンドウを開き、接続の準備をします2. 仮想マシンでifconf...
ここでは、Jenkins コンテナを例に 3 つの方法を紹介します。方法1コンテナをイメージにパッケ...
目次1. プロトタイプとは何ですか? 2. プロトタイプ__プロト__ 4. コンストラクター5. ...
js興味深いカウントダウンケース、参考までに、具体的な内容は次のとおりですコード: <!DO...
目次01 よくある故障 1 02 よくある欠陥 2 03 よくある欠陥 3 04 よくある欠陥 4 ...
効果デモ.html <html> <ヘッド> <メタ文字セット=&qu...
カルーセル主なアイデアは次のとおりです。大きなコンテナには、コンテナの幅の整数倍の非常に長いテーブル...
この記事では、例を使用して、MySQL ユーザー権限を確認および管理する方法を説明します。ご参考まで...
この記事は、Free Code Camp の基本アルゴリズム スクリプト「文字列内の最長の単語を見つ...
最近、リンク データについていくつか調査していて、rdf データベースを使用する必要があったため、v...
より使いやすい Web アプリケーションを設計するための 10 のヒントをご紹介します。ヒント1: ...
目次1. ルーティングアニメーション2. グループクエリとスタガー1. ルーティングアニメーションル...