Html5 canvas example

Html5 canvas example

In this example, the canvas is used to draw a rectangle, draw a circle or arc, draw a line, draw a text, and color gradient.

All of its color fonts are drawn on the canvas through js. The following describes how to summarize several context objects:

1. Draw a rectangle: fillRect (x, y, width, height) // x coordinate of the top left corner of the rectangle, y coordinate of the top left corner of the rectangle, width of the rectangle, and height of the rectangle

2. circle: arc (x, y, radius, 0, 2 * Math. PI, false); // The x coordinate of the center, y coordinate of the center, circle radius, start radians, end radians, and determine whether to draw them counterclockwise.

3. Draw a line: beginPath (); // reset the path start point

MoveTo (); // move the stroke to a vertex (x, y)

LineTo (); // defines the path from the current point to the point (x, y)

Context. closePath (); // defines the end of this path definition from the current point to the path start point.

Fill (); // fill path

4. Draw text: fillText (France, 65,100,560); // text content, starting point x coordinate, starting point y coordinate, total text width

5. the gradient can be defined for rectangles or text: createLinearGradient (180,90, canvas. width, 116 );

// X coordinate of the gradient start point, y coordinate of the gradient start point, x coordinate of the gradient end point, and y coordinate of the gradient end point

6. clear a part of the canvas: clearRect (x, y, width, height) // The x coordinate of the top left corner of the rectangle to be cleared, and the y coordinate of the top left corner of the rectangle to be cleared, width of the rectangle to be cleared. The height of the rectangle to be cleared)

1 .: