2020年2月18号–HTML5 SVG学习笔记
SVG介绍
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
SVG 圆形
要使用 SVG 绘制图形,你首先需要创建一个 <svg>
标签。
<svg width="1000" height="1000"></svg>
要创建一个圆形,需要添加一个 <circle>
标签。
下面是 SVG 代码:
<svg width="1000" height="1000">
<circle cx="100" cy="50" r="40" fill="blue" />
</svg>
cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,圆的中心会被设置为 (0, 0)。r属性定义圆的半径。
SVG 其他形状元素
我们来看看 SVG 一些预定义的其他形状元素:
SVG 矩形 - <rect>
<rect>
标签可用来创建矩形,以及矩形的变种。
<svg width="1000" height="1000">
<rect width="400" height="200"
x="20" y="20" fill="red" />
</svg>
SVG 直线 - <line>
<line>
标签是用来创建一个直线。
<svg width="500" height="510">
<line x1="20" y1="20" x2="300" y2="200"
style="stroke:#000000; stroke-linecap:round;
stroke-width:20" />
</svg>
SVG 曲线 - <polyline>
<polyline>
标签是用于创建任何只有直线的形状。
<svg width="2000" height="500">
<polyline style="stroke-linejoin:miter; stroke:black;
stroke-width:12; fill: none;"
points="100 100, 150 150, 200 100" />
</svg>
SVG 椭圆、多边形
SVG 椭圆 - <ellipse>
<ellipse>
标签是用来创建一个椭圆。
椭圆与圆很相似。不同之处在于椭圆有不同的x和y半径,而圆的x和y半径是相同的。
<svg width="500" height="250">
<ellipse cx="200" cy="100" rx="150" ry="70" style="fill:red" />
</svg>
SVG 多边形 - <polygon>
<polygon>
标签用来创建含有不少于三个边的图形。
<svg width="1000" height="1000">
<polygon points="100 100, 200 200, 300 0"
style="fill: red; stroke:black;" />
</svg>
SVG 动画
SVG 动画可以使用 <animate>
元素创建。
实例
创建一个矩形,将在3秒内更改其位置,然后重复动画两次:
<svg width="1000" height="250">
<rect width="150" height="150" fill="orange">
<animate attributeName="x" from="0" to="300"
dur="3s" fill="freeze" repeatCount="2"/>
</rect>
</svg>
attributeName: 指定哪个属性需要产生动画效果
from: 指定属性的起始值
to: 指定属性的结束值
dur: 指定动画运行的时间(持续时间)
fill=“freeze|remove”: 指定动画播放完毕后是停留在播放的终点还是回到起始位置
repeatCount: 指定动画的重复播放次数
SVG 路径
下面的命令可用于路径数据:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
<svg width="500" height="500">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
上面的例子定义了一条路径,它开始于位置150 0,到达位置75 200,然后从那里开始到225 200,最后在150 0关闭路径。
<canvas>
元素
HTML5 <canvas>
元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成。<canvas>
标签只是图形容器,您必须使用脚本来绘制图形。getContext()
方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。你可以通过多种方法使用 Canvas 绘制路径、盒、圆、字符以及添加图像。
<canvas id="myCanvas" width="200" height="100">
</canvas>
<canvas>
标签通常需要指定一个id属性 (脚本中经常引用),width 和 height 属性定义的画布的大小。
Canvas 的使用
Canvas
- 路径
在Canvas上画线,我们将使用以下两种方法:
moveTo(x,y)
定义线条开始坐标
lineTo(x,y)
定义线条结束坐标
在canvas中绘制圆形, 我们将使用以下方法:arc(x,y,r,start,stop)
Canvas -
文本
使用 canvas 绘制文本,重要的属性和方法如下:
font -
定义字体
fillText(text,x,y)
- 在 canvas 上绘制实心的文本
strokeText(text,x,y)
- 在 canvas 上绘制空心的文本
Canvas -
渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变:
createLinearGradient(x,y,x1,y1)
- 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1)
- 创建一个径向/圆渐变
当我们使用渐变对象,必须使用两种或两种以上的停止颜色。
addColorStop()
方法指定颜色停止,参数使用坐标来描述,可以是0至1.
使用渐变,设置fillStyle
或strokeStyle
的值为 渐变,然后绘制形状,如矩形,文本,或一条线。
Canvas -
图像
把一幅图像放置到画布上, 使用以下方法:drawImage(image,x,y)
HTML5 Web 存储
使用 HTML5 Web 存储, 可以在本地存储用户的浏览数据。在 HTML5 之前,本地存储使用的是 cookie。
Web 存储的优势
更加安全
更加快速
可以存储大量的数据
每个服务器请求都不会发送存储的数据
数据以 键/值 对存在,Web 网页的数据只允许该网页访问使用。
Web 存储对象的类型
Web 存储对象有两种类型:
localStorage
sessionStorage
localStorage 与 sessionStorage 的区别
localStorage 对象存储的数据没有时间限制。
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
Web 存储使用的 API
不管是 localStorage
,还是 sessionStorage
,可使用的API都相同,常用的有如下几个(以localStorage为例):
保存数据:localStorage.setItem(key,value)
;
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
清除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);
键/值对通常以字符串存储,你可以按自己的需要转换该格式。
HTML5 地理定位
什么是 Geolocation API?
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。
Geolocation(地理定位)对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。
使用地理定位
Geolocation API 的主要方法是 getCurrentPosition,它用来获得用户的位置。
下面是一个简单的地理定位实例,可返回用户位置的经度和纬度:
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()
方法。如果不支持,则向用户显示一段消息。
如果 getCurrentPosition()
运行成功,则向参数 showPosition
中规定的函数返回一个 coordinates
对象。
showPosition()
函数获得并显示经度和纬度。上面的例子是一个非常基础的地理定位脚本,不含错误处理。
getCurrentPosition() 方法返回数据
如果 getCurrentPosition()
运行成功,则 getCurrentPosition()
方法返回对象。始终会返回 latitude、longitude 以及 accuracy
属性。如果可用,则会返回其他下面的属性:
coords.latitude:十进制数的纬度
coords.longitude:十进制数的经度
coords.accuracy:位置精度
coords.altitude:海拔,海平面以上以米计
coords.altitudeAccuracy:位置的海拔精度
coords.heading:方向,从正北开始以度计
coords.speed:速度,以米/每秒计
timestamp:响应的日期/时间
HTML5 拖放(Drag 和 Drop)
拖放(Drag 和 drop)是 HTML5 标准的组成部分。拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
HTML5 拖放实例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>拖动 w3cschool.cn 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/statics/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
设置元素为可拖放
首先,为了使元素可拖动,需要把 draggable 属性设置为 true :
<img draggable="true">
拖动什么 - ondragstart 和 setData()
然后,规定当元素被拖动时,会发生什么。
在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。
dataTransfer.setData()
方法设置被拖数据的数据类型和值:
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中,数据类型是 “Text”,值是可拖动元素的 id (“drag1”)。
放到何处 - ondragover
ondragover
事件规定在何处放置被拖动的数据。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover
事件的 event.preventDefault()
方法:
event.preventDefault()
进行放置 - ondrop
当放置被拖数据时,会发生 drop 事件。
在上面的例子中,ondrop 属性调用了一个函数,drop(event)
:
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}