How to do graphics area with javascript

With the increasing popularity of the Internet and mobile devices, JavaScript is becoming more and more common in web development and mobile application development. However, many people may not know that in JavaScript, we can calculate and draw the area of ​​a graphic. In this article, we will walk you through how to calculate and draw the area of ​​a graph using JavaScript.

1. Area of ​​Rectangle

First, let’s start with the simplest shape – a rectangle. The formula for calculating the area of ​​a rectangle is as simple as multiplying its length and width. In JavaScript, we can use the following code to calculate the area of ​​a rectangle:

function calculateRectangleArea(length, width) {
  return length * width;
}

console.log(calculateRectangleArea(5, 10)); // 输出50

In the above code, we define a function named calculateRectangleArea, which accepts two parameterslength and width represent the length and width of the rectangle respectively. The result returned by the function is the area of ​​the rectangle.

Now that we have calculated the area of ​​the rectangle, we can use CSS and the HTML Canvas API to draw the rectangle. Here is an example:

nbsp;html>


  <style>
    #myCanvas {
      border: 1px solid #000;
    }
  </style>


  <canvas></canvas>
  <script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    
    const rectangleWidth = 100;
    const rectangleHeight = 50;
    const rectangleArea = calculateRectangleArea(rectangleWidth, rectangleHeight);
    
    ctx.fillRect(0, 0, rectangleWidth, rectangleHeight);
    
    ctx.font = "16px Arial";
    ctx.fillStyle = "#000";
    ctx.textAlign = "center";
    ctx.fillText(`矩形面积: ${rectangleArea}`, rectangleWidth / 2, rectangleHeight / 2);
  </script>

In the above code, we first create a canvas element named myCanvas in HTML. We then use JavaScript to get the canvas element and get the 2d context so we can draw graphics on the canvas.

Next, we defined the length and width of the rectangle and calculated the area of ​​the rectangle using the calculateRectangleArea function we wrote earlier. We then draw a rectangle on the canvas using the fillRect method. Finally, we use the fillText method to write the area of ​​the rectangle into the canvas.

2. Area of ​​a Circle

Next, let’s see how to calculate and draw the area of ​​a circle. In JavaScript, we can calculate the area of ​​a circle using the following formula: $S = \pi r^2$.

To draw a circle, we can use the arc method provided in the Canvas API of HTML5. Here is an example:

nbsp;html>


  <style>
    #myCanvas {
      border: 1px solid #000;
    }
  </style>


  <canvas></canvas>
  <script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
  
    const radius = 50;
    const circleArea = Math.PI * Math.pow(radius, 2);
  
    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
  
    ctx.font = "16px Arial";
    ctx.fillStyle = "#000";
    ctx.textAlign = "center";
    ctx.fillText(`圆形面积: ${circleArea.toFixed(2)}`, canvas.width / 2, canvas.height / 2);
  </script>

In the above code, we first obtain the myCanvas element and obtain the 2d context. We then defined the radius of the circle and calculated the area of ​​the circle using the formula. Next, we used the beginPath method to start drawing the circle, and used the arc method to draw the circle. Finally, we use the fillText method to write the area of ​​the circle into the canvas.

3. Area of ​​a Triangle

Now, let’s see how to calculate and draw the area of ​​a triangle. In JavaScript, we can calculate the area of ​​a triangle using the following formula: $S = \frac{1}{2} b * h$. Among them, $b$ represents the base of the triangle, and $h$ represents the height of the triangle.

To draw a triangle, we can use the moveTo and lineTo methods of the Canvas API. Here is an example:

nbsp;html>


  <style>
    #myCanvas {
      border: 1px solid #000;
    }
  </style>


  <canvas></canvas>
  <script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
  
    const base = 100;
    const height = 50;
    const triangleArea = 0.5 * base * height;
  
    ctx.beginPath();
    ctx.moveTo(canvas.width / 2, 0);
    ctx.lineTo(canvas.width / 2 - base / 2, height);
    ctx.lineTo(canvas.width / 2 + base / 2, height);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
  
    ctx.font = "16px Arial";
    ctx.fillStyle = "#000";
    ctx.textAlign = "center";
    ctx.fillText(`三角形面积: ${triangleArea}`, canvas.width / 2, height / 2);
  </script>

In the above code, we define the base and height of the triangle and calculate the area of ​​the triangle using the formula. We then start drawing the triangle using the beginPath method and connect the three points of the triangle using the moveTo and lineTo methods. Finally, we use the fillText method to write the area of ​​the triangle into the canvas.

Summary

In this article, we learned how to calculate and draw the area of ​​a graph using JavaScript. We showed how to calculate the area of ​​rectangles, circles, and triangles and draw them using the HTML Canvas API. We hope this article is helpful to you and allows you to better experience the charm of JavaScript.

The above is the detailed content of How to do graphics area with javascript. For more information, please follow other related articles on the PHP Chinese website!