canvas element

First, the basic knowledge of canvas element

The canvas element is an important element newly added in html5, which is specially used to draw graphics. Placing a canvas element on the page is equivalent to placing a "canvas" on the page in which graphics can be drawn. But drawing in canvas is not drawing with the mouse. In fact, the canvas element is just a colorless and transparent area. Need to use javascript to script the drawing in it. From this point of view, it can be understood as a canvas similar to other development languages.

1. Place the canvas element on the page. The first thing to specify is the three attributes of id, width and height.

The case code is as follows:

<body onload="draw('canvas1')">
<canvas id="canvas1" width="200" height="200"></canvas>
<script type="text/javascript">
    function draw(id){
    var canvas= document.getElementById(id);
     var context=canvas.getContext( ' 2d ' );     // Cannot be set to 3d, 4d 
    context.fillStyle= " #ddd " ;
    context.fillRect(10,10,120,100);
    lineWidth=2;
    context.strokeStyle = " blue " ;     // The border does not appear in this step 
    context.strokeRect( 20 , 20 , 100 , 100 );
}
</script>

operation result:

2. When drawing graphics with canvas elements, you need to go through several steps:

(1) To obtain the canvas element, first use the methods such as document.getElementById to obtain the canvas object, because the method provided by this object needs to be called to draw graphics.

(2) Get the context. When drawing graphics, you need to use the graphics context. The graphics context is an object that encapsulates many drawing functions. You need to use the getContext method of the canvas object to get the graphics context

(3) Filling and drawing borders. When drawing graphics with cavas, there are two ways—fill and stroke. Filling means filling the interior of the graphic; drawing a border is not filling the interior of the graphic. Only the outline of the graph is drawn.

(4) Set the drawing style. The so-called drawing style is mainly for the color of the graphics, but is not limited to the color of the graphics.

fillStyle attribute: fill in the color of the fill in this attribute

strokeStyle property: fill in the color of the border in this property

lineWidth property: specifies the width of the border

fillRect property: used to fill the rectangle context.fillRect(x,y,width,height)

strokeRect property: the border used to draw the rectangle context.strokeRect(x,y,width,height)

clearRect property: Erase the specified rectangular area context.clearRect(x,y,width,heigth)

(5) Specify the line width

(6) Draw a rectangle

2. Use the path

1. To draw graphics, if you want to draw graphics other than rectangles, you need to use paths. Again, get the graphics context when drawing starts, then do the following steps:

(1) To start creating a path, use the beginPath method of the graphics context object. This method does not use parameters. In the process of creating a path several times in the loop, the beginPath function must be called each time it starts to create.

(2) To create the path of the graphics, use the arc method of the graphics context, context.arc(x, y, radius, startAngle, endAngle, anticlockwise), x is the abscissa of the starting point for drawing the circle, y is the ordinate of the starting point, radius is the circle radius, startAngle is the start angle, endAngle is the end angle, and anticlockwise is whether to draw in the counterclockwise direction.

(3) Close the path, context.closePath();

(4) Set the drawing style and draw graphics

Guess you like