HTML5_05 SVG extension, geographic location, drag and drop, html5_05svg
1. SVG drawing summary:
① Method 1: an svg file exists.
Method 2: <body> <svg> </body>
② Draw a rectangle: <rect x = "" y = "" width = "" height = ""> </rect>
③ Draw a circle: <circle cx = "" cy = "" r = "> </circle>
④ Draw an ellipse: <ellipse cx = "" cy = "" rx = "" ry = ""> </ellipse>
⑤ Draw a straight line: <line x1 = "" y1 = "" x2 = "" y2 = ""> </line>
⑥ Draw a line: <polyline points = "x1, y1 x2, y2..."> </polyline>
7. Draw a polygon: <polygon points = "x1, y1 x2, y2..."> </polygon>
Drawing text: <text x = "" y = "" font-size = ""> XXX </text>
Image: <image xlink: href = ""> </image>
Gradient:
LinearGradient: linear gradient;
<Svg>
<Defs>
<LinearGradient id = "g1" x1 = "" y1 = "" x2 = "" y2 = "">
<Stop offset = "0" stop-color = "" stop-opacity = "">
</LinearGradient>
</Defs>
<Rect fill = "url (# g1)" stroke = "url (# g1)"> </rect>
</Svg>
2. SVG filter-pixel processing of images:
FeGaussianBlur: Gaussian blur filter;
<Defs>
<Filter id = "f1">
<FeGaussianBlur stdDeviation = "5"> </feGaussianBlur>
</Filter>
<Rect filter = "url (# f1)"> </rect>
</Defs>
3. Third-party drawing tool library -- Two. js:
<Div id = "container"> </div>
<Script src = "js/two. js"> </script>
<Script>
Var two = new Two ({}). appendTo (container );
Two. makeCircle (...);
Two. makeRectangle (...);
// Two. update ();
// Two. play ();
</Script>
4. New HTML5 features-geographical positioning:
① Window. navigator. geolocation: obtains the geographic location of the current browser;
Longitude -- longpolling; dimension -- latitude; altitude -- altitude; speed -- speed;
② The Mobile Phone uses the built-in GPS module or signal base station, and the PC uses reverse IP Address Resolution;
③ Browser Geographic Positioning involves personal privacy and inquiry permissions:
Navigator. geolocation {
GetCurrentPosition: fn, // One-time Location Information Retrieval
WatchPosition: fn, // periodic monitoring and positioning information
ClearWatch: fn // clear location Monitor
}
④ Usage:
Navigator. geolocation. getCurrentPosition (
Function (pos) {// The operation is successful.
Console. log (pos. coords. longtude); // longitude
Console. log (pos. coords. latitude); // dimension
Console. log (pos. coords. altitude); // altitude
Console. log (pos. coords. speed); // speed
}
Function (err) {// failed to get
Console. log (err. code );
Console. log (err. message );
}
);
5. Call Baidu map API:
View the use of JS call Baidu map instructions -- http://lbsyun.baidu.com/index.php? Title = jspopular
6. New HTML features-Drag and Drop API (Drag & Drop ):
① Triggered event of the dragged object source:
Ondragstart -- drag start; ondrag -- drag in; ondragend -- drag end;
② An object that can be dragged into and released -- a target trigger event:
Ondragenter -- drag into the top; ondragover -- hover over the top; ondrop -- release; ondragleave -- drag and exit;
③ The default action of the ondragover event is ondragleave, that is, the ondragleave is triggered by default after ondragover. The default action of the browser must be blocked during use;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
