HTML5 Canvas (1)-grating graphics (1) MidPoint Circle Algorithm

This series of essays is intended to provide you with some difficult canvas application scenarios, using mathematical or physical models to achieve results or performance comparable to that of desktop applications; in addition, this series will try to use the most concise js Code to demonstrate the effect.

Recommended: chrome and ie9 browsers. I am also working on a canvas-based vector Renderer class library.

Let's not talk much about it. Now we start to talk about it for the first time.

Grating graphics (1) MidPoint Circle Algorithm

When we use canvas to draw a graph, we usually call various APIs of context, such as strokeline and fillcolor for setting the style, and then draw the context. arc and context. fillRect of the graph.

If we have a scenario where we need to draw more than 1 million images and require the refresh frequency to reach 12 FPS, that is, we must complete 10 million canvasAPI calls within 1 second, think about how terrible this is. You can try it on the machine .. To force close the browser.

Below we introduce the dot circle algorithm in Grating graphics.

1. Retrieve the pixel array of the context element:

    var cxt= canvas.getContext("2d");    cxt.clearRect(0, 0, width, height);    var data = cxt.getImageData(0, 0,width, height);    imageData = data.data;

Now the imageData variable references all the pixel arrays of the current canvas Element.

The data structure of imageData is a one-dimensional array. Each of the four elements represents all the attributes of a pixel, which in turn represent the values of r, g, B, and alpha. The range is (0--255 ).

With this theoretical logic, we can use any point (x, y) on the canvas to calculate the index value of the first element representing the next pixel in imageData.

The calculation method is as follows:

function getStartIndex(x, y) {    return y * width * 4 + x * 4;}

With the above theoretical knowledge, you should know what we are going to do next? Right is to use the MidPoint Circle Algorithm to modify the color value (rgb) of each pixel.

2. grating learning-circle over the midpoint

First, we divide the circle into eight parts based on the symmetry of the circle.

Now we assume that the midpoint of this circle is at (0, 0.

Let's set d to the distance from p (x, y) to the center of the circle: Then we get the yufang Cheng FX (X, Y) = d.

Here we use the Bresenham algorithm to launch:

(This part may require students with graphics learning experience, and may introduce the Bresenham algorithm later ).

If dM <0, the next M point is in the circle.

If dM> 0, the next M point is out of the circle.

.

With the above theoretical knowledge, we can easily write the algorithm for drawing circles:

// Function circle (x, y, r, color) {var tx = 0, ty = r, d = 1-r; while (tx <= ty) {// draw point putpixel (x + tx, y + ty, color) using the eight-point symmetry of the circle; putpixel (x + tx, y-ty, color ); putpixel (x-tx, y + ty, color); putpixel (x-tx, y-ty, color); putpixel (x + ty, y + tx, color ); putpixel (x + ty, y-tx, color); putpixel (x-ty, y + tx, color); putpixel (x-ty, y-tx, color ); if (d <0) {d + = 2 * tx + 3;} else {d + = 2 * (tx-ty) + 5; ty --;} tx ++ ;}}

The putpixel function is used to fill the color values of each pixel in the corresponding array. here our color only indicates the gray value, because we have not done any processing on the color.

function putpixel(x, y, color){    var index = getStartIndex(x, y);    for(var i = 0; i< 4; i++) {        if(i == 3) {            imageData[index + i] = 255;        }        else{            // var co = parseInt(Math.random() * 255)            imageData[index + i] = color;        }    }}

So far, we have entered a circle Pixel into our pixel array, and finally put the pixel object back into the original canvas, so we can implement the circle Raster Method:

cxt.putImageData(data, 0, 0);

3. Case studies

The following case uses the boundary collision detection motion of circles as an example to illustrate that the grating image performance we have achieved is fully qualified for various bt scenarios. (It is recommended that other browsers of chrome18 parse js Code slowly)

 

Start
Stop

Next shift advance notice: implement the line drawing algorithm in the grating algorithm.