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();
</スクリプト>

効果は以下のとおりです。