One, the figure shows the style, that is, the color of the graphic, the second, the algorithm, that is, the shape of the image, is a simple line, rectangle, circle, fan, Polygon, and so on, JavaScript and CSS is undoubtedly the best partner, all the most basic vector graphics elements are 1*1px points, points can be line, into the surface, into any graphic.
The fundamental ____1*1px points of all vector graphs
If you have a certain understanding of CSS, Clip:rect (top,right,bottom,left) familiar with the words, you can know that the code clip out of an area, it should be noted that the clip:rect four sides of the position is relative to the object rather than the window, In addition this position must be absolute.
<div style= "position:absolute;width:1px;height:1px;background-color:red; Clip:rect (0,1,1,0); " ></div> can draw a red dot
The algorithm can be used to draw points in a particular position
Through the left and top of the CSS, drawing in a particular position, the algorithm to achieve the root cause of the visible graphics can be resolved, the following code can be in (100,100) coordinate position to draw a 1*1px red dot
<div style= "position:absolute;left:100px;top:100px;width:1px;height:1px;background-color:red; Clip:rect (0,1,1,0); " ></div>
Become the root of productive code ___ abstract, streamlined
(If it's just a line of code, there's really nothing to study, but if the most fundamental can be abstracted very well, it would be a big difference),
The above line of code can actually be abstracted, at a particular coordinate point (x,y), to draw a height of H, W-width area, and the color of the brush, for more convenient use, can be refined into the following methods:
Copy Code code as follows:
function _mkdiv (x, Y, W, H,color)
{
' <div style= ' position:absolute; ' +
' Left: ' + x + ' px; ' +
' Top: ' + y + ' px; ' +
' Width: ' + w + ' px; ' +
' Height: ' + H + ' px; ' +
' Clip:rect (0, ' +w+ ' px, ' +h+ ' px,0); ' +
' Background-color: ' + color +
';" ><\/div> ';
}
