1. The basic method of Canvas drawing
The coordinate system of Canvas is the basis of drawing. The upper left corner of the Canvas component is the origin (0, 0), the X axis is positive horizontally to the right, and the Y axis is positive vertically downward, which is the same as the screen coordinate system.
The methods of drawing various graphics provided by Canvas are shown in Table 1.
Table 1 Drawing and some operation methods provided by Canvas
A simple geometric basis is required when drawing graphs:
When using create_line() to draw a straight line, you need to specify the coordinates of two points as the starting point and end point of the straight line.
When using create_rectangle() to draw a rectangle, you need to specify the coordinates of two points, which are the coordinates of the upper left corner and the lower right corner of the rectangle.
When using create_oval() to draw an ellipse, you need to specify the coordinates of two points as the coordinates of the upper left corner point and the lower right corner point to determine a rectangle, and this method is responsible for drawing the inscribed ellipse of the rectangle.
Table 1 lists the functions of different create_xxx methods in Canvas, including text, shape, graphic image and components, which can be used to create rectangles, ellipses, polygons, fans, bows, arcs, lines, bitmaps, pictures, components and text wait. Different options can be specified when drawing different graphics, so as to achieve rich drawing effects.
2. Python Canvas draws simple strokes rabbits
This article introduces the use of Python Canvas to draw the stick figure rabbit shown in Figure 1.
Any complex graphics can be decomposed into basic shapes (lines, arcs (ellipses, circles), rectangles, etc.), which means that basic shapes can be combined into complex graphics.
Figure 1(a) is a picture of a "rabbit" from Baidu's "Standard Drawings", and Figure 1(b) is a picture of a "rabbit" drawn by the author with the "Shape" tool of Word, in which three shapes are used: For arcs, straight lines and ellipses, the dotted coordinate axis in the figure is the Canvas drawing coordinate system, and the solid line coordinate axis is the turtle drawing coordinate system.
Therefore, Figure 1(a) can be drawn in the shape of Canvas, similar to the "rabbit" picture drawn by Word's "Shape" tool in Figure 2(b), in which, except for the eyes using ellipses, there are three places using straight lines, and the rest are all circles arc fit. Therefore, Canvas can be used to draw arcs, straight lines and ellipses to complete the topic. Canvas drawing is based on coord (as shown in the dotted rectangle box in Figure 2), and coord is a rectangle composed of the coordinates of the upper left corner and the coordinates of the lower right corner. The Canvas drawing arc uses the turning angle extent=ed-sd, and the starting point coordinate y=y-|h| of the straight line when h<0.
Figure 1. The original drawing of a simple rabbit and the rabbit drawn with the Word shape tool 
Figure 2 The relationship between Canvas drawing and variables in the program
It can be seen from Figure 2 that five parameters are required to draw an arc, and the end angle ed>0, and only four parameters are needed for a straight line and an ellipse, so the number of parameters is unified, and the arc, straight line, and ellipse are distinguished, and the fifth parameter of a straight line is is 0, and the fifth parameter of the ellipse is -1.
The arcs, straight lines, and ellipses of the stick figure rabbit are digitized according to the above standards, and drawn according to the following rules:
For arcs: the coordinates of the upper left corner are (x, y), the coordinates of the lower right corner are (x+d, y+d), and the corner is ed-sd.
For a straight line: when h≥0, start point (x, y), end point (x+w, y+h); when h<0, start point (x, y+h), end point (x+w, y).
For an ellipse: the coordinates of the upper left corner are (x, y), and the coordinates of the lower right corner are (x+w, y+h).
The complete program code is as follows:
Execution result: as shown in Figure 3.
Figure 3 A simple rabbit drawn with Python Canvas