1. The style displayed by the image, that is, the color and transparency of the image. 2, Algorithm It is a simple line, rectangle, circle, slice, polygon, etc. JavaScript and CSS are undoubtedly the best partners, the most basic element of all vector images is a 1 * 1px point. points can be line, surface, or any image.
Fundamentals of all vector graphs ____ 1 * 1px points
If you have some knowledge about CSS and are familiar with clip: rect (top, right, bottom, left, Code When editing an area, note that the positions of the Four Edges in clip: rect are relative to the object rather than the window. In addition, the position must be absolute.
<Div style = "position: absolute; width: 1px; Height: 1px; Background-color: red; clip: rect (0, 1, 0 ); "> </div> you can draw a red dot.
The foundation of algorithm to become a graph ____ draw points at a specific position
You can use left and top of CSS to draw a picture at a specific position and realize the algorithm as the root of the visible image. The following code can be found in (100,100) draw a 1 * 1px red point
<Div style = "position: absolute; left: 100px; top: 100px; width: 1px; Height: 1px; Background-color: red; clip: rect (0, 1, 0 ); "> </div>
Become the root of productive code ___ abstraction, streamlining
(If there is only one line of code above, there is nothing to study. On the contrary, if we abstract the most fundamental code, it will be quite different ),
The above line of code can be abstracted as, in a specific coordinate point (x, y), draw an area with H in height and W in width, and the color of the paint brush is color, to make it easier to use, you can refine it into the following methods:
Copy code The Code is 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> ';
}
