HTML5 Simple coordinate grid knowledge

With HTML5 I think the coordinates and grid should not be unfamiliar, then I simply write down my understanding.

Coordinates: This is defined in the canvas of HTML5:

The painting is not good, very well understand it. Take a closer look is not just some lines and points, define some numbers, we have to do is to get these numbers.

Now that we know the coordinates, we can do a lot of things. Here is a simple introduction, in the middle of the HTML, it must be the browser rules, we just have to call it, then how do we know?

Then we need the grid. But we have to draw the grid every time to know the coordinates are not very troublesome. So I guess I can draw a sketch. You don't have to paint every time. With a design diagram, we call it the HTML5.

MoveTo () and LineTo (). These two methods to see themselves, very simple.

Next look at the grid:

Grid: It's just a few lines and a vertical line. How did you get here? It's not moveto and LineTo's application. The code is as follows:

Vertical
for (var i = stepx + 0.5; i < context.canvas.width; i + = stepx) {
Context.beginpath ();
Context.moveto (i, 0);
Context.lineto (i, context.canvas.height);
Context.stroke ();
}

Line
for (var i = stepy + 0.5; i < context.canvas.height; i + = Stepy) {
Context.beginpath ();
Context.moveto (0, I);
Context.lineto (Context.canvas.width, i);
Context.stroke ();
}

It's clear at first sight.

Since the vertical line is called vertical, then relative coordinates, not that is, as the horizontal axis changes, so that is the x change, then y? It must be 0 and canvas high.

The horizontal line is also the same, as the vertical axis changes, that is, the y change, x is 0 and the width of the canvas.

Then the above stepx and stepy are the number of steps to draw the grid, that is, the vertical and vertical lines, the distance between the horizontal line and the horizontal line.

Why add 0.5? That is the knowledge of the pixel boundary and the line segment, which is plainly 0-1 between us on 0.5, like wide 1 pixels we can just fill.

How do we get the coordinates?

Online methods are many, in fact all the same. Used canvas. Getboundingclientrect () to get the relative position of the canvas object relative to the screen: The function returns an object that has 6 properties: top,lef,right,bottom,width,height; The top, left, and CSS are very similar in understanding, width , height is the height of the element itself, but the Right,bottom and CSS are somewhat different in understanding. Right is the distance from the leftmost edge of the window to the left of the element, and bottom refers to the distance from the top of the window to the bottom of the element.

So we say that width and height are the elements of their own width and height what is the concept?

Take IE for example:

IE returns only Top,lef,right,bottom four values, not enough to get the value of width,height in the following ways:

var ro = object.getboundingclientrect ();
var Width = Ro.right-ro.left;
var Height = ro.bottom-ro.top;

This is where the element itself is wide and high.

Then the expression in the canvas is:

function Windowtocanvas (canvas, x, y) {
var bbox = Canvas.getboundingclinetrect ();//Gets the relative position of the canvas object relative to the screen
return {x:x-bbox.left* (canvas.width/bbox.width),
y:bbox.top* (Canvas.height/bbox.hight)}
}

It is common to get coordinates. Why do you take it, look at you. How to use, of course, through monitoring and triggering, online look good, no specific code.

Good night, Kiss!

HTML5 Simple coordinate grid knowledge