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 コマンドの高度な使用例

推薦する

CentOS 7.x に ZSH ターミナルをインストールする方法

1. 基本コンポーネントをインストールするまず、 yumコマンドを実行して、コードpullために必要...

Nginx を使用してポート転送 TCP プロキシを実装する例

目次需要背景Nginx を使用する理由は何ですか? Nginx によるポート転送依存関係をインストー...

Linux で JDK をインストールして環境変数を設定する方法 (この記事で十分です)

目次1. Linuxのビット数を確認する2. JDKをダウンロードする3. JDKをインストールする...

MySQL の冗長インデックスと重複インデックスの詳細な説明

MySQL では、同じ列に複数のインデックスを作成できます。意図的であるかどうかにかかわらず、MyS...

Linux (CentOS7) に Tomcat をインストールし、Tomcat をスタートアップ項目として設定します (tomcat8 を例に挙げます)

目次TomcatをインストールするTomcat 圧縮パッケージをダウンロードTomcatには3つの主...

MySQL アーキテクチャのナレッジポイントの概要

1. データベースとデータベースインスタンスMySQL の研究では、データベースとデータベース イン...

Reactの新バージョンのライフサイクルフック機能と使用方法の詳細な説明

旧ライフサイクルと比較して 3つのフックが廃止され、2つの新しいフックが追加されましたReact16...

Vue プロジェクトで TS (TypeScript) を使用するための入門チュートリアル

目次1. Typescriptの紹介2. 設定ファイル webpack 設定3. プロジェクトに.t...

MySQL ツリー構造データベース テーブル設計

目次序文1. 基本データ2. 継承駆動設計3. 左右の値のエンコーディングに基づく設計4. ツリー構...

HTML と JavaScript を使用してローカル メディア (ビデオとオーディオ) ファイルを再生する方法

まず、セキュリティ上の理由から、JavaScript はローカル リソース ファイルに直接アクセスで...

HTML チュートリアル: 順序付きリスト

<br />原文: http://andymao.com/andy/post/103.h...

flex-grow、flex-shrink、flex-basis、9グリッドレイアウトを理解する

1. flex-grow、flex-shrink、flex-basis プロパティflex-grow...

一般的な MySQL 関数の例の概要 [集計関数、文字列、数値、時刻と日付の処理など]

この記事では、よく使用される MySQL 関数について説明します。ご参考までに、詳細は以下の通りです...

VueはExcelデータをエクスポートするパブリック関数メソッドをカプセル化します

vue+element UI は Excel データをエクスポートするためのパブリック関数をカプセル...