HTML5 几个元素

w3school笔记

HTML5的canvas元素使用JavaScript在网页上绘制图像，画布是一个矩形区域，您可以控制每一像素

canvas拥有多种绘制路径/矩形/原型/字符 以及添加图像的方法

canvas元素本身是没有绘图能力的。所有绘图工作必须在JavaScript内部完成，也可以使用js插件

SVG指可伸缩矢量图形

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

SVg使用XML格式定义图形

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

SVG的优势

SVG图像可通过文本编辑器来创建和修改

SVG图像可被搜索。索引 脚本化或压缩

SVG是可伸缩的

SVG图像可在任何的分辨率下被高质量的打印 ！！

SVG可在图像质量不下降的情况下被放大

 

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

SVG基于XML，这意味着 SVGDOM中的每个元素都是可用的，可以为每个元素添加JavaScript处理器

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

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

Canvas是逐像素进行渲染的。

在canvas中，一旦图像被胡子hi完成，他就不会继续得到浏览器的关注，如果其位置发生变化，那么整个场景也要重新绘制

，包括任何或许①被图像覆盖的对象

 

、Canvas 

依赖分辨率

不支持事件处理器，弱的文本渲染能力

能够以 png jpg格式保存图像，最适合图像密集型的游戏，其中的许多对象会被频繁重新绘制

SVG

不依赖分辨率

支持事件处理器

最适合带有大型渲染区域的应用程序

复杂度高会减慢渲染速度

不适合游戏应用

 

HTML5 可以定位用户的位置

HTML5 提供了两种在客户端储存数据的新方法

localStorage 没有时间限制的数据储存

sessinstorage  针对一个session的数据储存

之前，这些这些都是由cookie完成的，但是cookie不适合大量数据的存储，因为他们由每个服务器的请求来传递

这使得cookie速度很慢而且效率也不高

在HTML5中 数据不是由每个服务器请求传递的，而是只有在请求时使用数据。他在不影响网站性能的情况下储存大量数据成为可能

LocalStoryage 方法储存的数据没有时间限制

如何创建和访问localStrage：

实例

<script type="text/javascript">

 localStrorage.lastname="Smith";

document.write(localStrorage.lastname);

</script>

 

 

sessionStrorage方法

sessionStrorage是针对一个session进行数据储存。当用户关闭浏览器后，

数据会被删除。

如何创建并访问一个sessionStrorage

<script type="text/javascript">

sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);

</script>

 

web Worker试运行在后台的JAvaScript，不会影响页面的性能。

所有的浏览器都支持web worker，除了Internet Explorer

server-Sent 服务器发送网页获取来自服务器的更新。