JavaScriptはキャンバスを使用して座標と線を描画します

JavaScriptはキャンバスを使用して座標と線を描画します

この記事では、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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • SpringとDisruptorを統合する簡単な例
  • Java ベースの NIO の紹介と使用
  • Java 実践: Spring を使用してバーコードと検証コードを開発する
  • Java の sleep() と wait() の違いのまとめ
  • JavaScript コンソールのその他の機能
  • Java 実践: シティポリフォン処理
  • Java 実用的な敏感な単語フィルター
  • Java 実践: Foodie Alliance 注文システム
  • Java の基礎: リスト要素のソートパフォーマンスの比較
  • Java マルチスレッド ディスラプターの紹介

<<:  Nginx 構成検出サービスのステータスを実装する方法

>>:  Linux における mv コマンドの高度な使用例

推薦する

Linuxアカウントファイル制御管理の詳細な手順

Linux システムでは、ユーザーが手動で作成したさまざまなアカウントに加えて、システムまたはプログ...

Vue Element フロントエンドアプリケーション開発の動的メニューとルーティングの関連付け処理

目次概要1. メニューとルーティング処理2. メニューとルートリスト3. ログインプロセスの処理概要...

MySQL は重複データを削除して最小の ID ソリューションを維持します

オンラインで検索して重複データを削除し、ID が最小のデータだけを残します。方法は次のとおりです。 ...

Windows 8 での ssh コマンドの使用記録

1. 仮想マシンとgit bashウィンドウを開き、接続の準備をします2. 仮想マシンでifconf...

Dockerコンテナデータをコピーしてバックアップする方法の詳細な説明

ここでは、Jenkins コンテナを例に 3 つの方法を紹介します。方法1コンテナをイメージにパッケ...

JavaScript プロトタイプとプロトタイプチェーンの深い理解

目次1. プロトタイプとは何ですか? 2. プロトタイプ__プロト__ 4. コンストラクター5. ...

興味深いカウントダウン効果を実現するjs

js興味深いカウントダウンケース、参考までに、具体的な内容は次のとおりですコード: <!DO...

MySQL MGR 構築時の一般的な問題と解決策

目次01 よくある故障 1 02 よくある欠陥 2 03 よくある欠陥 3 04 よくある欠陥 4 ...

クールなIoT大画面機能を実現するHTML+VUEページング

効果デモ.html <html> <ヘッド> <メタ文字セット=&qu...

JS でカルーセル画像を実装するいくつかの方法

カルーセル主なアイデアは次のとおりです。大きなコンテナには、コンテナの幅の整数倍の非常に長いテーブル...

MySQLのユーザー権限の確認と管理方法の詳細な説明

この記事では、例を使用して、MySQL ユーザー権限を確認および管理する方法を説明します。ご参考まで...

JavaScript で文字列内の最長の単語を見つける 3 つの方法 (推奨)

この記事は、Free Code Camp の基本アルゴリズム スクリプト「文字列内の最長の単語を見つ...

Linux システムでの virtuoso データベースの詳細なインストールと使用

最近、リンク データについていくつか調査していて、rdf データベースを使用する必要があったため、v...

便利で使いやすいウェブアプリケーションを設計するための 10 のヒント

より使いやすい Web アプリケーションを設計するための 10 のヒントをご紹介します。ヒント1: ...

Angularルーティングアニメーションと高度なアニメーション機能の詳細な説明

目次1. ルーティングアニメーション2. グループクエリとスタガー1. ルーティングアニメーションル...