JavaScript uses canvas to draw coordinates and lines

index.html

<canvas id="cvs" width="500" height="500"></canvas>

javascript-uses-canvas-to-draw-coordinates-and-lines.markdown

JavaScript uses canvas to draw coordinates and lines

A Pen by Edward Lance Lorilla on CodePen.

License.

script.js

var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
// The distance between the coordinate axis and the upper right and lower left margin of the canvas
var padding = {
  top:20,
  right:20,
  bottom:20,
  left:20
}
// The width and height of the arrow in the axis
var arrow = {
  width:12,
  height:20
}
// Find the coordinates of the vertices on the 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 the 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 arrows
//Draw up arrow
// ^
// |
// |
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 the specified position in the coordinate axis, the coordinate algorithm:
* The x axis of the point: the x coordinate of the origin + the horizontal distance from the point to the origin
* The y-axis of the point: the y coordinate of the origin-the vertical distance from the point to the origin
*/
//Define the coordinates of the point
var points = [[10,10],[50,50],[90,90],[130,130],[170,170],[200,200]];
//Draw a point in the coordinates Use a loop to traverse 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 according to 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);
});
//Stroke
ctx.stroke();

style.css

canvas{
  border: 1px dashed gray;
}