HTML5 Canvas Improvement Course (2) -- grating graphics (2) Bresenham algorithm draws a straight line

The last article introduced how to use the dot-point circle algorithm to improve the Canvas Drawing performance.

With the powerful pixel processing capabilities of HTML5 canvas, this section focuses on introducing Bresenham Algorithm in computer graphics-grating learning and implementing two-point linear draw procedures.

Grating graphics (2) Bresenham Algorithm for Linear drawing

Bresenham is a typical linear raster Algorithm in computer graphics. Its History can be traced back to the previous World, which was proposed by Jack E. Bresenham when he worked at IBM in 1962. The history of algorithms is not described here. If you are interested, you can refer to the wikipedia link. There is a detailed introduction in it. Now we will focus on its implementation theory.

1. Bresenham algorithm implementation principle

The Bresenham algorithm is interpreted as follows: Due to the particularity of the computer screen, pixels cannot be displayed in decimal places. For example, we cannot display 0.5 pixels on the screen. In this way, we can assume that the slope of a line segment is k. When this line increases (or decreases) by 1 pixel in the X direction, its Y direction can only increase (or decrease) 1 or 0, which depends on the distance between the actual line and the nearest grating mesh point. The maximum error of this distance is 0.5. With a perceptual knowledge, we can calculate the amount of changes in the Y direction in the world of mathematics.

Bresenham's mathematical implementation: (in order to understand the following content, some basic mathematical concepts may be required. If you forget it, it doesn't matter. I will explain it as easily as possible)

1. Suppose there are two points P1 and P2 in the space, then we can obtain the slope k, assuming 0 <k <1, so we only need to consider the x direction each increment 1, y is incremented by 1 or 0 at a time.

2. Set the linear equation to y = kx + B.

The current vertex of a straight line is (xi, y) -- This vertex is a non-discrete vertex.

The current grating point of a straight line is (xi, yi) -- this point is a discrete point.

Then: the point of the next line should be (xi + 1, k (xi + 1) + B ),

Because the grating point can only be located at yi or yi + 1, we use the variable d_upper to represent the distance between the coordinate of the real vertex and the coordinate of the (yi + 1) discrete vertex: d_upper = (yi + 1)-(k (xi + 1) + B); d_lower is used to represent the distance between the coordinates of real points and (yi) discrete degrees: d_lower = (k (xi + 1) + B)-yi.

In this way, we can determine how to select a vertex: If d_upper> d_lower, it indicates that the actual vertex is closer to the yi position, and yi is the y coordinate of the next discrete vertex; select yi + 1.

Therefore, our program requires: d_lower-d_upper = 2 k (xi + 1)-2yi + 2b-1 (the simplified result can be calculated by yourself if you do not believe it ). (1)

Set: The x distance between p1 and p2 to dx, And the y distance to dy, then the slope k = dy/dx;

We multiply the formula (1) by the Coefficient dx and name it variable Pi (decision parameter in step I) = dx (d_lower-d_upper) = 2 * dy * xi-2 * dx * yi + c. (2) (c = 2 * dy + dx (2b-1), c is a constant which will be omitted during program computation ).

Through formula (2), we can obtain the decision parameter of Pi + 1 (I + 1) = 2 * dy * Xi + 1-2 * dx * Yi + 1 + c (3)

After the difference between formula (3) and formula (2) is simplified:

(4) (the call finally pushed down the formula we wanted. I don't know if you have understood the derivation process. In fact, the process is much easier)

You can use formula (2) to obtain p0 = 2 dy-dx.

Then we can call the algorithm for calculating decision parameters recursively. The algorithm can be extended to any Quadrant by swapping the positions of x and y and coordinates.

2. Bresenham Program Implementation

// Use the Bresenham algorithm to draw a straight line of any slope (including the starting point, excluding the ending point) function Line_Bresenham (x1, y1, x2, y2, color) {var x = x1; var y = y1; var dx = Math. abs (x2-x1); var dy = Math. abs (y2-y1); var s1 = x2> x1? 1:-1; var s2 = y2> y1? 1:-1; var interchange = false; // dx and dy if (dy> dx) are not interchangeable by default. // when the slope is greater than 1, dx, dy interchange {var temp = dx; dx = dy; dy = temp; interchange = true;} var p = 2 * dy-dx; for (var I = 0; I <dx; I ++) {putpixel (x, y, color); if (p> = 0) {if (! Interchange) // when the slope is <1, select the upper/lower pixel point y + = s2; else // when the slope is> 1, select the left/right pixel point x + = s1; p = p + 2 * dy-2 * dx;} if (! Interchange) x + = s1; // when the slope is <1, select x as the step else y + = s2; // when the slope is> 1, select y as step p + = 2 * dy ;}}

This Code takes into account any slope. you can adjust it to see how the lines with different slopes are processed.

The following simple demo is a comprehensive application of the two essays (of course, it is not perfect, so you can understand the meaning ):

 

Start Stop

Next notice: 1. Polygon painting.

2. fill color.