1、SVG繪圖總結： ①方法一：已有svg文件，<img src="x.svg"> 方法二：<body><svg></svg></body> ②繪製矩形：<rect x="" y="" width="" height=""></rect> ③繪製圓形：<circle cx="" cy="" r="" ...
1、SVG繪圖總結：
①方法一：已有svg文件，<img src="x.svg">
方法二：<body><svg></svg></body>
②繪製矩形：<rect x="" y="" width="" height=""></rect>
③繪製圓形：<circle cx="" cy="" r=""></circle>
④繪製橢圓：<ellipse cx="" cy="" rx="" ry=""></ellipse>
⑤繪製直線：<line x1="" y1="" x2="" y2=""></line>
⑥繪製折線：<polyline points="x1,y1 x2,y2 ..."></polyline>
⑦繪製多邊形：<polygon points="x1,y1 x2,y2 ..."></polygon>
⑧繪製文本：<text x="" y="" font-size="">XXX</text>
⑨繪製圖像：<image xlink:href=""></image>
⑩使用漸變：
linearGradient：線性漸變；
<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）——對圖像進行像素化處理：
feGaussianBlur：高斯模糊濾鏡；
<defs>
<filter id="f1">
<feGaussianBlur stdDeviation="5"></feGaussianBlur>
</filter>
<rect filter="url(#f1)"></rect>
</defs>
3、第三方繪圖工具庫——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、HTML5新特性——地理定位：
①window.navigator.geolocation：獲取當前瀏覽器所在的地理位置；
經度——longitude；維度——latitude；海拔——altitude；速度——speed；
②手機使用內置GPS模塊或是信號基站，PC使用IP地址反向解析；
③瀏覽器地理定位涉及個人隱私，詢問許可權：
navigator.geolocation{
getCurrentPosition:fn,//一次性獲取定位信息
watchPosition:fn,//周期性監視定位信息
clearWatch:fn//清除定位監視器
}
④使用：
navigator.geolocation.getCurrentPosition(
function(pos){//獲取成功
console.log(pos.coords.longtude);//經度
console.log(pos.coords.latitude);//維度
console.log(pos.coords.altitude);//海拔
console.log(pos.coords.speed);//速度
}
function(err){//獲取失敗
console.log(err.code);
console.log(err.message);
}
);
5、調用百度地圖API：
查看使用JS調用百度地圖說明文檔——http://lbsyun.baidu.com/index.php?title=jspopular
6、HTML新特性——拖放API（Drag & Drop）：
①被拖動對象——源對象（source）觸發事件：
ondragstart——拖動開始；ondrag——拖動中；ondragend——拖動結束；
②可拖著進入並鬆手的對象——目標對象（target）觸發事件：
ondragenter——拖著進入上方；ondragover——拖著在上方懸停；ondrop——鬆開；ondragleave——拖動著離開；
③ondragover事件後續預設行為是ondragleave，即ondragover後預設必然觸發ondragleave，使用時須阻止瀏覽器此預設行為；
