Study Notes on HTML5 canvas (2)-deep learning

Small man (Bill man) Personal Original, welcome to reprint, reprint please indicate the address, small man (Bill man) column address http://blog.csdn.net/bill_man

The previous article introduced the basic concepts of HTML5 canvas. it is not difficult for most programmers who have learned how to use the canvas of j2s and Android for drawing. This article continues with the previous article to explain how to draw straight lines and arcs.

The following code first explains how to draw a straight line:

The beginpath and closepath methods are used here to indicate the start path and end path, each node in the middle of the path, and the moveTo parameter is the start coordinate, lineto parameter indicates the end point of the line segment. In this way, we have completed a path, but note that we have not completed the painting. The focus is on the following sentence. Stroke is a hollow painting, and fill is a solid filling. It should be noted that for a line segment, using fill will not have any effect. Using the beginpath, closepath, moveTo, and lineto functions can not only draw a straight line, but also draw a triangle and a rectangle. The first is the code of the flower triangle:

This code connects three points to form a triangle. The following code connects the four points to form a quadrilateral:

The effects of the two codes are as follows:

The following code draws an arc:

There is no difference from the above in other aspects. The key is the parameters of the arc function, which are the cross coordinate of the center, the vertical coordinate of the center, the radius of the circle, and the starting angle (in radians ), the arc angle drawn (in radians). If the last Boolean parameter is false, it is clockwise. If it is true, it is counterclockwise. The starting angle is the angle between the start side and the level, the Start side rotates clockwise around the horizontal position.

Context. ARC (400,100, 60, math. PI/18, math. Pi, false); effect:

Context. ARC (400,100, 60, math. PI/18, math. Pi, true); effect:

In case of any errors, I hope you can correct them more.

Next, continue to study the drawing style