JavaScript uses canvas to draw coordinates and lines

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:
  • A simple example of integrating Spring with Disruptor
  • Introduction and use of NIO based on Java
  • Java Practice: Using Spring to Develop Barcodes and Verification Codes
  • Summary of the differences between java sleep() and wait()
  • More Features of the JavaScript Console
  • Java Practice: City Polyphone Processing
  • Java practical sensitive word filter
  • Java Practice: Foodie Alliance Ordering System
  • Java Basics: Sorting Performance Comparison of List Elements
  • Java Multithreading Disruptor Introduction

<<:  How to implement Nginx configuration detection service status

>>:  Learn MySQL database in one hour (Zhang Guo)

Recommend

SSH port forwarding, local port forwarding, remote port forwarding, dynamic port forwarding details

Part 1 Overview of SSH Port Forwarding When you a...

In-depth explanation of slots and filters in Vue

Table of contents Slots What are slots? Slot Cont...

JavaScript implements double-ended queue

This article example shares the specific code of ...

Summary of things to pay attention to in the footer of a web page

Lots of links You’ve no doubt seen a lot of sites ...

How to view the status of remote server files in Linux

As shown below: The test command determines wheth...

Detailed Introduction to Nginx Installation and Configuration Rules

Table of contents 1. Installation and operation o...

The problem of jquery.form.js denying access in IE and the input upload button must be actively clicked

Let's take a look at the code first <form ...

Add a copy code button code to the website code block pre tag

Referring to other more professional blog systems...

Nginx compiled nginx - add new module

1. View existing modules /usr/local/nginx/sbin/ng...

Detailed explanation of how to enable https service in Apache under Linux environment

This article describes how to enable https servic...

Integration practice of Vue+Element background management framework

Table of contents Vue+ElementUI background manage...

MySQL 8.0.20 installation and configuration tutorial under Docker

Docker installs MySQL version 8.0.20 for your ref...

Research on Web Page Size

<br />According to statistics, the average s...

CSS scroll-snap scroll event stop and element position detection implementation

1. Scroll Snap is a must-have skill for front-end...

WeChat applet realizes the effect of shaking the sieve

This article shares the specific code of the WeCh...