Home > Article > Web Front-end > Learn how to draw graphics on canvas

Learn how to draw graphics on canvas

WBOYOriginal: 2024-02-18 22:42:06871browse

How to use canvas graphics to draw

Canvas is a powerful element in HTML5, which allows us to use JavaScript to draw graphics, animations, games, etc. In this article, we will learn how to use the canvas element to draw graphics, and use specific code examples to help us understand better.

1. Preparation
Before we start, we need an HTML document that contains a canvas element. We can add the following code to the HTML file:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Canvas绘图</title>
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>

  <script>
    // 在这里编写绘图代码
  </script>
</body>
</html>

In the above code, we added a canvas element to the body tag and assigned an id of "myCanvas". The width and height of the canvas element are set to 500 pixels each.

2. Draw graphics
In this part, we will learn how to draw different graphics on canvas through specific code examples. We will use JavaScript’s Canvas API to achieve our goals.

Drawing a rectangle
To draw a rectangle, we can use the fillRect() method in the Canvas API. Please see the sample code below:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(50, 50, 200, 100);

In the above code, we first obtain the canvas element and its 2D context object. Then, we set the color of the rectangle to be filled to red, and used the fillRect() method to draw a rectangle with a starting position of (x:50, y:50), a width of 200, and a height of 100.

Drawing a circle
To draw a circle, we can use beginPath(), arc() and ## in the Canvas API #fill()Method. Please see the sample code below:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.fillStyle = "blue";
ctx.arc(250, 250, 100, 0, 2*Math.PI);
ctx.fill();

In the above code, we first obtain the canvas element and its 2D context object. Then, we use the

beginPath() method to start a new path, set the color of the circle to be filled to blue, and use the arc() method to draw a circle with the center The position is (x:250, y:250) and the radius is 100. Finally, we fill the circle using the fill() method.

To draw a straight line, we can use
beginPath(), moveTo(), lineTo( in the Canvas API ) and stroke() methods. Please see the sample code below:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.strokeStyle = "green";
ctx.moveTo(50, 50);
ctx.lineTo(200, 200);
ctx.stroke();

In the above code, we first obtain the canvas element and its 2D context object. Then, we use the

beginPath() method to start a new path, set the line color to green, and use the moveTo() method to move the starting point to (x:50, y :50), use the lineTo() method to draw a straight line to the target point (x:200, y:200). Finally, we draw the straight line using the stroke() method.

3. Summary

The above are some simple examples that demonstrate how to use the canvas element and some methods in the Canvas API to draw basic graphics. By studying and practicing these examples, we can further explore and realize the potential of canvas drawing.

I hope this article can help you understand how to use canvas graphics drawing, and provide some reference for your graphics drawing in the project. I wish you success!

The above is the detailed content of Learn how to draw graphics on canvas. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html5 html 对象 canvas

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：An in-depth discussion of the meaning and function of HTTP status code 502Next article：An in-depth discussion of the meaning and function of HTTP status code 502

See more

Learn how to draw graphics on canvas

Related articles