SVG drawing of Html5_04

1, about canvas drawing image:
Problem: When you need to draw more than one picture, you must wait for all the pictures to finish loading to start drawing, and each picture is an asynchronous request, with no sequencing, which is completely unpredictable;
Scheme:
var progress=0;//Global Load Progress
var img=new Image ();
img.src= ' xx.jpg ';
Img.onload=function () {
progress+=10;//the image weight
if (progress===100) {
Startdraw ();
}
}
2, about a graphics/image in the canvas to add event monitoring:
Problem: In HTML, only tags/elements can add event listener, while Canvas drawing has only one label--canvas;
Scenario: To add an event listener to a graphic/image in a canvas, delegate to the canvas, get the coordinates of the event, and then determine if it is in the target image/graph;
3. svg drawing:
Scalable Vector graphics, scalable vectors;
Element group:<g></g>; multiple elements, each member sharing the attributes of the <g> element;
4. SVG drawing--Draw rectangle:
①svg Graphics properties can be declared using HTML tag attributes, or they can be declared using CSS-like styles that are not part of the HTML DOM, are not directly rect.x read and write, and can be manipulated using the setattribute () of the core DOM;
②<rect></rect>
③ Properties: Width of width--rectangle, height of height--rectangle, x-coordinate of x--anchor point, y-coordinate of y--anchor, fill--fill color, fill-opacity--fill color transparency; stroke--stroke color; stroke-width- -Stroke width;
④ using JS to create a new SVG element:
Method One: svg.innerhtml= ' <rect></rect> ';
Method Two: Document.createelementns (' http://www.w3.org/2000/svg ', ' rect ');
5. SVG drawing--Draw a circle:
①<circle></circle>
② Properties: r--radius, x-coordinate of cx--center, y-coordinate of cy--Center, fill--fill Color, default #000;fill-opacity--fill color transparency, stroke--stroke color, default transparent ; stroke-width--stroke width;
6, SVG drawing--Draw ellipse:
①<ellipse></ellipse>
② Properties: rx--transverse radius, ry--longitudinal radius, x-coordinate of cx--center, y-coordinate of cy--Center, fill--fill Color, default #000;fill-opacity--fill color transparency, stroke--stroke color, The default is transparent;stroke-width--stroke width;
7, SVG drawing--Draw straight line:
①<line></line>
② properties: x1--start axis, y1--start ordinate; x2--end ordinate; y2--end ordinate; stroke--stroke color, default transparent;stroke-width--stroke width;
8. SVG drawing--Draw a polyline:
①<polyline></polyline>
② properties: Points on points--polyline, Value: "0,0 10,20 x, y ...", fill--fill color, default to #000;fill-opacity--fill color transparency, must be set to 0, otherwise automatically populated; stroke--stroke color, The default is transparent;stroke-width--stroke width;
9. SVG drawing--Drawing polygons:
①<polygon></polygon>
② Properties: points--points on polygon Corners, Value: "0,0 10,20 x, y ..."; fill--fill Color, default #000;fill-opacity--fill color transparency; stroke--stroke color, default = Transparent ; stroke-width--stroke width;
10. SVG drawing--Drawing text:
①<text> text content </text>
② properties: x--start axis, y--start ordinate; font-size--font size; font-family--font type; fill--fill color, default #000;fill-opacity--fill color transparency; stroke--stroke color, The default is transparent;stroke-width--stroke width;
11. SVG drawing--Drawing images:
① if the bitmap is plotted on SVG, the SVG image will be distorted after amplification;
②<image></image>
③ property: x--start axis, y--beginning ordinate; xlink:href--Specifies the width of the url;width--picture of the picture, the default is 0 does not display, the height--picture is high, the default is 0 does not display;
12. Fade color in SVG drawing:
The gradient object belongs to the special effect object in SVG-the effect object must be defined in the <defs></defs> tag;
<svg id= "S1" width= "height=" >
<defs>
<!--define a special effect element with ID 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 effect element with ID rainbow--
<rect x= "y=" "Width=" height= "$" fill= "url (#rainbow)" ></rect>
</svg>

SVG drawing of Html5_04