この記事では、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 構成検出サービスのステータスを実装する方法
1. 基本コンポーネントをインストールするまず、 yumコマンドを実行して、コードpullために必要...
目次需要背景Nginx を使用する理由は何ですか? Nginx によるポート転送依存関係をインストー...
目次1. Linuxのビット数を確認する2. JDKをダウンロードする3. JDKをインストールする...
MySQL では、同じ列に複数のインデックスを作成できます。意図的であるかどうかにかかわらず、MyS...
目次TomcatをインストールするTomcat 圧縮パッケージをダウンロードTomcatには3つの主...
以下のように表示されます。 nsenter -t 1 -m -u -n -i sh -c "...
1. データベースとデータベースインスタンスMySQL の研究では、データベースとデータベース イン...
旧ライフサイクルと比較して 3つのフックが廃止され、2つの新しいフックが追加されましたReact16...
目次1. Typescriptの紹介2. 設定ファイル webpack 設定3. プロジェクトに.t...
目次序文1. 基本データ2. 継承駆動設計3. 左右の値のエンコーディングに基づく設計4. ツリー構...
まず、セキュリティ上の理由から、JavaScript はローカル リソース ファイルに直接アクセスで...
<br />原文: http://andymao.com/andy/post/103.h...
1. flex-grow、flex-shrink、flex-basis プロパティflex-grow...
この記事では、よく使用される MySQL 関数について説明します。ご参考までに、詳細は以下の通りです...
vue+element UI は Excel データをエクスポートするためのパブリック関数をカプセル...