HTML5_04 SVG plot, html5_04svg

HTML5_04 SVG plot, html5_04svg

1. Draw images on Canvas:
Problem: When you need to draw multiple images, you must wait until all the images are loaded to start the painting. Each image is an asynchronous request and has no order for each other. It cannot be predicted which one is loaded first;
Solution:
Var progress = 0; // global loading progress
Var img = new Image ();
Img.src#'xx.jpg ';
Img. onload = function (){
Progress + = 10; // weight of the image
If (progress === 100 ){
StartDraw ();
}
}
2. Add event listening for a graphic or image in the Canvas:
Problem: in HTML, only tags/elements can be added to event listening, while Canvas drawing only has one tag-Canvas;
Solution: to add event listening to a certain image or image in the Canvas, you can delegate the event to the Canvas to obtain the coordinates of the event and determine whether the event is in the target image or image;
3. SVG plotting:
Scalable Vector Graphics, a Scalable Vector graph;
Element Group: <g> </g>. Multiple elements are included and each member shares the attributes of the <g> element;
4. SVG drawing -- draw a rectangle:
① SVG graphical attributes can be declared using HTML tag attributes, or using CSS-like styles specific to SVG tags. These attributes do not belong to html dom and cannot be directly rect. x reads and writes. You can use the setAttribute (); method of the core DOM for operations;
② <Rect> </rect>
③ Attribute: width -- width of the rectangle; height -- height of the rectangle; x -- X coordinate of the positioning point; y -- Y coordinate of the positioning point; fill -- fill color; fill-opacity -- fill color transparency; stroke -- stroke color; stroke-width -- stroke width;
④ Use JS to create a new SVG element:
Method 1: svg. innerHTML = '<rect> </rect> ';
Method 2: document. createElementNS ('HTTP: // www.w3.org/2000/svg', 'rect ');
5. SVG plot -- draw a circle:
① <Circle> </circle>
② Properties: r -- radius; cx -- X coordinate of the center; cy -- Y coordinate of the center; fill -- fill color; default value: #000; fill-opacity -- fill color transparency; stroke-stroke color, transparent by default; stroke-width -- stroke width;
6. SVG plotting -- drawing an ellipse:
① <Ellipse> </ellipse>
② Attributes: rx -- transverse radius; ry -- longitudinal radius; cx -- X coordinate of the center; cy -- Y coordinate of the center; fill -- fill color; #000 by default; fill-opacity -- fill color transparency; stroke -- stroke color; default value: transparent; stroke-width -- stroke width;
7. SVG plotting-draw a straight line:
① <Line> </line>
② Attributes: x1 -- start point X coordinate; y1 -- start point X coordinate; x2 -- end point X coordinate; y2 -- end point X coordinate; stroke -- stroke color; transparent by default; stroke-width -- stroke width;
8. SVG plotting-draw a line:
① <Polyline> </polyline>
② Attribute: points -- point on the line; Value: "0, 0 10, 20 x, y... "; fill -- fill color. The default value is #000; fill-opacity -- fill color transparency. It must be set to 0; otherwise, it will be automatically filled; stroke -- stroke color. The default value is transparent; stroke-width -- stroke width;
9. Draw a polygon using SVG:
① <Polygon> </polygon>
② Attribute: points -- point on each corner of a polygon; Value: ", 20 x, y... "; fill -- fill color, #000 by default; fill-opacity -- fill color transparency; stroke -- stroke color, transparent by default; stroke-width -- stroke width;
10. SVG plotting-drawing text:
① <Text> text content </text>
② Attribute: x -- the abscissa of the starting point; y -- the ordinate of the starting point; font-size -- the font size; font-family -- the font type; fill -- the fill color; #000 by default; fill-opacity -- fill color transparency; stroke -- stroke color; default value: transparent; stroke-width -- stroke width;
11. SVG plotting-Drawing Images:
① If a bitmap is drawn on SVG, the SVG image will be distorted after being enlarged;
② <Image> </image>
③ Attribute: x -- the horizontal coordinate of the start point; y -- the vertical coordinate of the start point; xlink: href -- specifies the image URL; width -- the image width. The default value is 0. height: The image height, the default value is 0;
12. Gradient in SVG drawing:
The gradient object belongs to the special effect object in SVG, which must be defined in the <defs> </defs> label. For example:
<Svg id = "s1" width = "500" height = "400">
<Defs>
<! -- Define the special effect element whose id is rainbow -->
<LinearGradient id = "rainbow" x1 = "0" y1 = "0" x2 = "100%" y2 = "100%">
<Stop offset = "0" stop-color = "red"> </stop>
<Stop offset = "1" stop-color = "purple"> </stop>
</LinearGradient>
</Defs>
<! -- Reference the special effect element whose id is rainbow -->
<Rect x = "50" y = "100" width = "400" height = "200" fill = "url (# rainbow)"> </rect>
</Svg>