HTML5（二）

一、目录

1、HTML5 内联SVG

2、HTML5 MathML

3、HTML5 拖放（Drag和Drop）

4、HTML5 地理位置（Geolocation）

二、正文

1、HTML5 内联SVG

SVG——可伸缩矢量图

        ——改变尺寸或大小不会失真

SVG与Canvas的区别：

SVG是一种使用XML描述2D图形的语言。

Canvas是通过JavaScript来绘制2D图形。

SVG 基于 XML，意味着 SVG DOM 中的每个元素都是可用的。可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas	SVG
依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序（比如谷歌地图） 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 不适合游戏应用

2、HTML5 MathML

可以在文档中使用MathML元素，对应的标签<math></math>

MathML是数学标记语言。

3、HTML5 拖放（Drag和Drop）

抓取对象以后拖到另一个位置。

（1）设置元素为可拖放：

<img draggable="true">

（2）拖动什么 - ondragstart 和 setData()

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

（3）放到何处 - ondragover

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，必须阻止对元素的默认处理方式。

event.preventDefault()

（4）进行放置 - ondrop

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

4、HTML5 地理位置（Geolocation）

用于定位用户的位置。

var x=document.getElementById("demo");
function getLocation()
{
    if (navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
    else
    {
        x.innerHTML="该浏览器不支持获取地理位置。";
    }
}
 
function showPosition(position)
{
    x.innerHTML="纬度: " + position.coords.latitude + 
    "<br>经度: " + position.coords.longitude;    
}

用 getCurrentPosition(showPosition,showError) 方法来获得用户的位置。

如果 getCurrentPosition() 运行成功，则向参数showPosition中规定的函数返回一个 coordinates 对象

showPosition,showError 都是函数。

在地图中显示结果：

function showPosition(position)
{
    var latlon=position.coords.latitude+","+position.coords.longitude;
 
    var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}

Google地图脚本：

function showPosition(position)
{
	lat=position.coords.latitude;
	lon=position.coords.longitude;
	latlon=new google.maps.LatLng(lat, lon)
	mapholder=document.getElementById('mapholder')
	mapholder.style.height='250px';
	mapholder.style.width='500px';

	var myOptions={
		center:latlon,zoom:14,
		mapTypeId:google.maps.MapTypeId.ROADMAP,
		mapTypeControl:false,
		navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
	};
	var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
	var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}

Geolocation对象的方法：

getCurrentPosition()——获得用户的位置。

watchPosition()  ——返回用户当前位置，并继续返回用户移动时的更新位置。

clearWatch()——停止watchPosition()方法。