HTML5 provides a brand-new canvas function, which allows users to draw graphics, text, pictures, etc. on web pages through Canvas. Canvas means the canvas, and the canvas in real life is used for drawing. The Canvas in HTML5 is similar to it. We can call it "the canvas in the web page". By default, Canvas is a rectangular canvas of 300px by 50px. Users can customize the size of the canvas or add other properties to the canvas.
Canvas is not drawn with the mouse, users need to control the contents of the canvas through JavaScript, such as adding pictures, lines, text, etc. This section will explain how to use Canvas drawing to add canvas and draw lines.
Use tags in HTML5 to create a canvas in a web page, the syntax is as follows:
<canvas id="cavsElem" width="400" height="300">
您的浏览器不支持Canvas
</canvas>
The above code defines a canvas whose id is cavsElem, and sets the width of the canvas to 400px and the height to 300px.
In order to draw graphics on the canvas, you must first obtain the canvas object in the web page through the getElementByld() method of JavaScript. The code is as follows:
var canvas=document.getElementById('cavsElem');
In the above code, the parameter "2d" represents the type of brush, here it represents the brush for two-dimensional drawing. If you want to draw a 3D graph, you can replace the parameter with "webgl". The 3D operation is not widely used yet, just understand it.
2d represents a plane. When drawing graphics, it is necessary to determine the starting point on the plane, that is, "where to start drawing". This point needs to be controlled by coordinates. The coordinate axis of Canvas starts from "0,0" in the upper left corner. The x-axis increases to the right, and the y-axis increases downward, as shown in the figure.
draw lines
Lines are the basis of all complex graphics. If you want to draw complex graphics, you must first start with drawing lines. Before drawing a line, first understand the composition of the line. The simplest line is composed of three parts, which are the initial position, the endpoint of the line and the stroke. The composition of the line is shown in the figure.
When drawing graphics, you first need to determine where to place the "pen", and the position where the "pen" is placed is the initial position. Use the moveTo(x,y) method in the canvas to define the initial position, where x and y represent the positions of the horizontal and vertical axes, separated by ",". The values of x and y are numbers, representing pixel values (units omitted). The sample code for setting the initial position is as follows:
var context=canvas.getContext('2d');
context.moveTo(x,y);
Use the line To(x,y) method in the canvas to define the endpoints of the line. Similar to the initial position, the end point of the connection also needs to define the x and y coordinate position. The code to define the endpoint of the connection is as follows:
context.lineTo(x,y);
A line can be drawn with the initial position and endpoints, but the line cannot be seen. At this point we need to add a stroke to the line to make it visible. Using the stroke0 method in the canvas, the visual effect of the line can be achieved. The code to add a stroke to the line is as follows:
context.stroke();
After understanding the method of drawing lines, the following demonstrates how to draw the letter M through lines in the canvas.
Create C:\codelchapter02demo12.html, first create a canvas, and then draw the letter M. The specific code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制字母M</title>
</head>
<body>
<canvas id="cas" width="300" height="300">
您的浏览器不支持Canvas
</canvas>
<script>
var context=document.getElementById('cas').getContext('2d');
context.moveTo(10,100); //定义初始位置
context.lineTo(30,10); //定义连线端点
context.lineTo(50,100); //定义连线端点
context.lineTo(70,10); //定义连线端点
context.lineTo(90,100); //定义连线端点
context.stroke(); //描边
</script>
</body>
</html>
In the above code, lines 8 and 10 create a canvas with a width of 300px and a height of 300px; lines of code 13 and 18 draw the letter M by defining the initial position, defining the endpoint of the connection and stroke.
(2) Save the code, and visit demol2.html in the browser, the page effect is shown in the figure.
draw the letter M
The drawn letter M is shown in the figure, indicating that the line drawing has been successfully completed through Canvas.