Learn how to draw graphics on canvas

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:

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.

1. Drawing a rectangle
   To draw a rectangle, we can use thefillRect()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 thefillRect()method to draw a rectangle with a starting position of (x:50, y:50), a width of 200, and a height of 100.

2. Drawing a circle
   To draw a circle, we can usebeginPath(),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();

Copy after login

beginPath()method to start a new path, set the color of the circle to be filled to blue, and use thearc()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 thefill()method.

Draw a line
3. To draw a straight line, we can use
   beginPath(),moveTo(),lineTo( in the Canvas API )andstroke()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();

Copy after login
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 themoveTo()method to move the starting point to (x:50, y :50), use thelineTo()method to draw a straight line to the target point (x:200, y:200). Finally, we draw the straight line using thestroke()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!