JavaScript uses canvas to draw coordinates and lines

This article shares the specific code of using canvas to draw coordinates and lines in JavaScript for your reference. The specific content is as follows

The specific code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Draw multiple points at the specified position</title>
    <style>
        canvas{
            border: 1px dashed gray;
        }
    </style>
</head>
<body>
    <canvas id="cvs" width="500" height="500"></canvas>
</body>
</html>

js code:

<script>
    var cvs = document.getElementById('cvs');
    var ctx = cvs.getContext('2d');
 
    // The distance between the coordinate axis and the lower right and left margins of the canvas var padding = {
        top:20,
        right:20,
        bottom:20,
        left:20
    }
    // Width and height of the arrow in the coordinate axis var arrow = {
        width:12,
        height:20
    }
    // Find the coordinates of the vertex on the coordinate axis var vertexTop = {
        x:padding.left,
        y:padding.top
    }
    // Find the coordinates of the origin of the coordinate axis var origin = {
        x:padding.left,
        y:cvs.height - padding.bottom
    }
    // Find the coordinates of the right vertex of the coordinate axis var vertexRight = {
        x:cvs.width - padding.left,
        y:cvs.height - padding.bottom
    }
 
    //Set line width ctx.lineWidth = 2;
    //Draw two lines of the coordinate axis ctx.beginPath();
    ctx.moveTo(vertexTop.x,vertexTop.y);
    ctx.lineTo(origin.x,origin.y);
    ctx.lineTo(vertexRight.x,vertexRight.y);
    ctx.stroke();
 
    //How to draw an arrow//Draw an arrow on top// ^
    // |
    // |
    ctx.beginPath();
    ctx.moveTo(vertexTop.x,vertexTop.y);
    ctx.lineTo(vertexTop.x - arrow.width/2,vertexTop.y + arrow.height);
    ctx.lineTo(vertexTop.x,vertexTop.y + arrow.height/2);
    ctx.lineTo(vertexTop.x + arrow.width/2,vertexTop.y + arrow.height);
    ctx.fill();
 
    //Draw the arrow on the right // --->
    ctx.beginPath();
    ctx.moveTo(vertexRight.x,vertexRight.y);
    ctx.lineTo(vertexRight.x - arrow.height,vertexRight.y - arrow.width);
    ctx.lineTo(vertexRight.x - arrow.height/2,vertexRight.y);
    ctx.lineTo(vertexRight.x - arrow.height,vertexRight.y + arrow.width);
    ctx.fill();
 
    /*
     * Draw a point at a specified position in the coordinate axis. Coordinate algorithm:
     * The x-axis of a point: the x-coordinate of the origin + the horizontal distance from the point to the origin * The y-axis of a point: the y-coordinate of the origin - the vertical distance from the point to the origin */
    //Define the coordinates of the points var points = [[10,10],[50,50],[90,90],[130,130],[170,170],[200,200]];
    //Draw points in the coordinates and use a loop to iterate through the coordinates in the array //Set the color ctx.fillStyle = "green";
    points.forEach(function(arr){
        ctx.fillRect(origin.x + arr[0],origin.y - arr[1],5,5);
    });
    //Connect the lines based on the points //Prevent redrawing ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = "yellow";
    points.forEach(function (arr) {
        ctx.lineTo(origin.x + arr[0] + 1.8, origin.y - arr[1] + 1.8);
    });
    //Strokectx.stroke();
</script>

The effect is as follows:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: