html自学教程（八）html5基础（定位图形）

html5 地理定位

html5 Geolocation API用于获得用户的地理位置

鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的

注意:Geolocation(地理定位)对于拥有GPS的设备,地理定位更加精确

Geolocation API的主要方法是gerCurrentPositon,它用来获得用户的位置

下面是一个简答的地理定位实例,可返回用户位置的经度和纬度:

var x=document.getElementById("demo");

function getLocation(){

if(navigator.geolocation){

navigator.geolocation.getCurrentLocation(showPositon);}

else{

x.innerHTML="该浏览器不支持获取地理位置."}

}

function showPosition(position){

x.innerHTML="纬度:"+position.coords.latitude+

"<br>经度:"+position.coords.longitude;}

实例解析:

●检测是否支持地理定位

●如果支持,则运行gerCurrentPosition()方法.如果不支持,则向用户显示一段信息

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

●showPosition()函数获得并显示经度和纬度

上面的例子是一个非常基础的地理定位脚本,不含错误处理

你需要先熟悉JavaScript才能理解和使用API

如果gerCurrentPosition()运行成功,则getCurrentPosition()方法返回对象.始终返回latitude,longtitude以及accuracy属性.如果可用,则会返回其他下面的属性:

●coords.latitude:十进制数的纬度

●coords.longtitude:十进制的经度

●coords.accuracy:位置精度

●coords.altitude:海拔,海平面以上以米计

●coords.altitudeAccuracy:位置的海拔精度

●coords.heading:方向,从正北开始以度计

●coords.speed:速度,以米/每秒计

●timestamp:响应的日期/时间

二 html5 拖放

拖放(Drag和drop)是html5标准的组成部分

拖放是一种常见的特性,即抓取对象以后拖到另一个位置

在html5中,拖放是标准的一部分,任何元素都能够拖放

★设置元素为可拖放

首先,为了使元素可拖动,需要把draggable属性设置为true:

★拖动什么-ondragstart和setData()

然后,规定当元素拖动时,会发生什么

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

function drag(ev){

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

在这个例子中,数据类型是"Text",值是可拖动元素的id("drag1")

★放到何处-ondragover

ondragover时间规定在何处放置被拖动的数据

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

这要通过调用ondragover时间的event.preventDefault()方法:

event.preventDefault()

★进行放置-ondrop

当放置被拖数据时,会发生drop事件

function drop(ev){

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));}

三 html5 SVG

什么是SVG?

●SVG指可伸缩矢量图形(Scalable Vector Graphics)

●SVG用于定义用于网络的基于矢量的图形

●SVG使用XML格式定义图形

●SVG图像在放大或改变尺寸的情况下其图形质量不会损失

●SVG是万维联盟的标准

在html5中,你能够直接将SVG元素嵌入html页面中

要使用SVG绘制图形,你首先需要创建一个<svg>标签

<svg width="1000" height="1000"></svg>

要创建一个圆形,需要添加一个<circle>标签

下面是SVG代码:

<svg width="1000" height="1000">
<circle cx="100" cy="50" r="40" fill="red" />
</svg>

●cx和cy属性定义圆点的x和y坐标.如果省略cx和cy,圆的中心会被设置为(0,0)

●r属性定义圆的半径

运行效果如下:

明：SVG 虽然也是标签，但它不是 HTML5，标题加了 HTML5 只是为了与 canvas 放到一起。

一、为什么要学 SVG ?

SVG 意为可缩放矢量图形（Scalable Vector Graphics），使用 XML 格式定义矢量图形。其他的图像格式都是基于像素的，但是 SVG 没有单位的概念，它的20只是表示1的20倍，所以 SVG 绘制的图形放大或缩小都不会失真。

与其他图像比较，SVG 的优势有以下几点：

SVG 可以被多个工具读取和修改。
SVG 与其他格式图片相比，尺寸更小，可压缩性强。
SVG 可任意伸缩。
SVG 图像可以随意地高质量打印。
SVG 图像可以添加文本和事件，还可搜索，适合做地图。
SVG 是纯粹的 XML，不是 HTML5。
SVG是W3C标准

二、SVG 形状元素

2.1、svg 标签

SVG 的代码都放到 svg 标签呢，SVG 中的标签都是闭合标签，与html中标签用法一致。svg的属性有：

有width和height，指定了svg的大小。

eg：画一条直线，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body style="height:600px;">
 <svg width="300" height="300">
  <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="20"></line>    
 </svg> 
</body>
</html>

上述 svg 设置的宽高没有带单位，此时默认是像素值，如果需要添加单位时，除了绝对单位，也可以设置相对单位。

viewBox 属性

使用语法：<svg viewBox=" x1,y1,width,height "></svg>

四个参数分别是左上角的横纵坐标、视口的宽高。表示只看SVG的某一部分，由上述四个参数决定。

使用 viewBox 之后，相当于svg整体大小不变，只能看到 viewBox 设置部分，视觉上被放大。

2.2、SVG 如何嵌入 HTML

SVG 的代码可以直接嵌入到 html 页面中，也可以通过 html 的embed、object、iframe嵌入到html中。嵌入的时候嵌入的是 SVG 文件，SVG 文件必须使用 .svg 后缀。分别介绍各种方法如何使用？

2.2.1、embed 嵌入：

使用语法：<embed src="line.svg" type="image/svg+xml"></embed>

src是SVG文件路径，type 表示 embed 引入文件类型。

优点：所有浏览器都支持，并允许使用脚本。

缺点：不推荐 html4 和 html 中使用，但 html5 支持。

2.2.2、object 嵌入：

使用语法：<object data="line.svg" type="image/svg+xml"></object>

data 是 SVG 文件路径，type 表示 object 引入文件类型。

优点：所有浏览器都支持，支持 html、html4 和 html5。

缺点：不允许使用脚本。

2.2.3、iframe 嵌入：

使用语法：<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>

src是 SVG 文件路径，width、height、frameborder 设置的大小和边框。

优点：所有浏览器都支持，并允许使用脚本。

缺点：不推荐 html4 和 html 中使用，但 html5 支持。

2.2.4、html中嵌入：

svg 标签直接插入 html 内容内，与其他标签用法一致。

2.2.5、连接到svg文件：

使用 a 标签，直接链接到 SVG 文件。

使用语法：<a href="line.svg">查看SVG</a>

三、SVG形状元素

3.1、线 - line

使用语法：
<svg width="300" height="300" >  
 <line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line>
</svg>

使用line标签创建线条，(x1,y1)是起点，(x2,y2)是终点，stroke绘制黑线，stroke-width是线宽。

3.2、矩形 - rect

//使用语法：
<svg width="300" height="300" >
<rect 
 width="100" height="100"  //大小设置
 x="50" y="50"  //可选 左上角位置，svg的左上角默认(0,0)
 rx="20" ry="50" //可选 设置圆角
 stroke-width="3" stroke="red" fill="pink" //绘制样式控制
></rect>
</svg>

上述参数 width、height是必填参数，x、y是可选参数，如不设置的时候，默认为(0,0)，也就是svg的左上角开始绘制。rx、ry是可选参数，不设置是矩形没有圆角。fill定义填充颜色。

3.3、圆形 - circle

// 使用语法
<svg width="300" height="300" >
 <circle 
  cx="100" cy="50" // 定义圆心 ，可选
  r="40" // 圆的半径
  stroke="black" stroke-width="2" fill="red"/> //绘制黑框填充红色
</svg>

上述(cx,xy)定义圆心的位置，是可选参数，如果不设置默认圆心是（0,0）。r是必需参数，设置圆的半径。

3.4、椭圆 - ellipse

椭圆与圆相似，不同之处在于椭圆有不同的x和y半径，而圆两个半径是相同的。

// 使用语法
<svg width="300" height="300" >
 <ellipse 
  rx="20" ry="100" //设置椭圆的x、y方向的半径
  fill="purple" // 椭圆填充色
  cx="150" cy="150" //设置椭圆的圆心 ，可选参数
 ></ellipse>
</svg>

上述椭圆的两个rx、ry两个方向半径是必须参数，如果rx=ry就表示是圆形，（cx,cy）是椭圆的圆心，是可选参数，如果不设置，则默认圆心为（0,0）。

3.5、折线 - polyline

// 使用语法
<svg width="300" height="300" style="border:solid 1px red;">
  <!-- 绘制出一个默认填充黑色的三角形 -->
 <polyline 
  points=" //点的集合
   0 ,0, // 第一个点坐标
   100,100, // 第二个点坐标
   100,200 // 第三个点坐标
    " 
  stroke="green" 
 ></polyline>
<!-- 绘制一个台阶式的一条折线 -->
 <polyline 
  points="0,0,50,0,50,50,100,50,100,100,150,100,150,150" 
  stroke="#4b27ff" fill="none"
 ></polyline>
</svg>

上述代码执行结果如图所示：

需要注意的是 points 中包含了多个点的坐标，但不是一个数组。

3.6、多边形 - polygon

polygon 标签用来创建不少于3个边的图形，多边形是闭合的，即所有线条连接起来。

// 使用语法
<svg width="300" height="300" style="border:solid 1px red;">
 <polygon 
  points="
    0,0,   //多边形的第一点
   100,100,  //多边形的第二点
    0,100  //多边形的第三点
  " 
	stroke="purple"
	stroke-width="1"
	fill="none"
 ></polygon>
</svg>

polygon绘制的时候与折线有些类似，但是polygon会自动闭合，折线不会。

3.7、路径 - path

path 是SVG基本形状中最强大的一个，不仅能创建其他基本形状，还能创建更多其他形状，如贝塞尔曲线、2次曲线等。

点个关注，下篇更精彩！

试用DIV制作德国国旗

德意志联邦共和国，简称德国，国旗由3种颜色长方形所构成。

我们需要制作出3个长方形来组合成德国国旗，需要用到<div>标签。

什么是div？

<div> 可以定义文档中的分区或节；<div> 标签可以把文档分割为独立的、不同的部分。

我们暂且把 div 看作是一个盒子。

现在我们要做的就是让浏览器显示盒子，并把盒子变成长方形，然后染上黑，红，金这3种颜色。

试一试在<body></body>加上<div></div>

你会发现无论怎么刷新浏览器，还是一片空白。

这是因为<div>这个盒子没有正常完全的显示，所以需要两样东西：

第一：缺少宽度和高度；我们要在纸上画出长方形，就必须有长和宽，<div>也是同理。

第二：缺少边框或背景颜色；要想让<div>这个盒子能被我们看见，通常是给它加个边框或者背景颜色。

二者缺一不可，为了这两样东西，我们需要把 style 添加到<div>中：

<div style="width:500px;height:100px;background:rgb(0,0,0);"></div>

然后刷新浏览器，会出现一个黑色长方形：

我们来看一下加入<div>的html代码：

<div style="width:500px;height:100px;background:rgb(0,0,0);"></div>

style：它定义了<div>的样式，也就是说，要让div变成什么样子，就需要style来改变div。style等于号后面的width、height、background都属于style的属性。

width：定义div的宽度。

height：定义div的高度。

background：定义div的背景颜色。【黑色：rgb(0,0,0) 红色：rgb(255,0,0) 金色：rgb(255,200,0) 】

只是一行简单的代码，我们就已经完成了国旗1/3的制作，那么依葫芦画瓢，你自己写出剩下两行代码吧~

答案：

总结：<div></div>这个盒子需要宽width、高height、背景颜色background才能正常显示出来。

在线咨询

上一篇：这种反爬虫手段有点意思，看我破了它
下一篇：为什么使用 HTML 5？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html自学教程（八）html5基础（定位 图形）

一、为什么要学 SVG ?

二、SVG 形状元素

三、SVG形状元素

您的项目需求

html自学教程（八）html5基础（定位图形）