Answer:
First you create a canvas and a context. To get all the numbers to fit neatly in a grid pattern, we need to calculate the position of each cell, and each number. To make everything look better here I will use a margin and patting to make each cell look like a button. You could also use JQuery or something else to get a better look, but this is just to make code that you can replicate and play with. To draw each cell in the right place, we need a nested for loop for the X and Y axis, rows and columns. It is not important here which loop comes first, we just need one inside the other. Because we are making a multiplication table, we need one row and column than is specified. For example, to show a times table for every number from one to twelve, we would need thirteen rows and thirteen columns. Inside the inner loop, we are drawing each cell. At this point you would only need to draw the number at the center of each cell and you are done, but we need to know where the center of the cell is and where to draw the margins. The code also uses different colors for when a cell in a source number or a result number. Red for a result number and green for a source. Because both the loops count from zero, we identify a source number as when the row or column value is zero and set the colors accordingly. If the number in the cell is not a source, then its value is just the value of the first for loop, multiplied by the value of the second for loop. Now to draw the cell. The starting position of the cell begins with the X and Y values from the two for loops, multiplied by the width and height of each cell. The ending position is those values plus the width and height of each cell. But that is not enough in this case, we now need to calculate the padding and the margins. This is used to show a space between cells and to give the appearance of a raised button. Padding and margin at the top of the cell is achieved by just adding the values from the top of the cell. However, because JavaScript function fillRect in the HTML 5 canvas uses heights and width to draw rectangles, we need to calculate the size of the rectangle by taking into account all the sides of the cell. So the width of the rectangle in the middle of the cell is the width of the cell, minus the padding times two. To calculate for both the padding and margin together, just do the same thing by first adding both values before multiplying them by two and subtracting that from the cell's size. Now that we have our separation between our buttoned cells, it is time to draw the number using the JavaScript canvas methods for text drawing. We first set the font, then we align the text to the center of the the position we provide and set the color to white to make it stand out. Now we draw the number. To convert a number to string in JavaScript, we use the toString method. All numbers and strings are objects with their own methods in JavaScript. To calculate the point where we draw the number, we take the position of the cell plus the size of the cell divided by two to get the center. By that is not enough. Even though we specified that the text should be centered, JavaScript and the canvas only centers horizontally, so that the text is above the center of the cell. To compensate, we add half the height of our font to the center of the cell to get the text centered properly. It is possible to calculate the height of the text on the fly using JavaScript HTML5 canvas methods, but this works differently of each browser and I just don't want to get into that here. The result of this code is a simple looking multiplication table. I have also added code to change the color of cells when the mouse comes inside of them. For this to work however, you will have to remember to update the canvas each time you get the JavaScript onMouseMove event. Otherwise, the image will not change. The mouse coordinates are for the window, not the image, so we subtract canvas.offsetLeft and canvas.offsetTop to compensate for the position of the HTML5 canvas on the page.
No comments:
Post a Comment