前端 HTML5总结

新增元素（部分）

新的语义/结构元素

新的表单元素

图形

画布 Canvas

1.创建 Canvas 元素，规定画布的 id、宽度和高度

2.通过 JavaScript 来绘制

一个红色的矩形

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

fillRect 方法拥有参数 (0,0,150,75)，意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

实例 - 线条

实例 - 圆形

arc()方法

实例 - 图像

把一幅图像放置到画布上：
.drawImage()方法

颜色、样式和阴影

线条样式

更多：
https://www.w3school.com.cn/tags/html_ref_canvas.asp

Web本地存储

通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。

在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。
本地存储更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。

与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。

本地存储对象

window.localStorage - 存储没有截止日期的数据，当浏览器被关闭时数据不会被删除，在下一天、周或年中，都是可用的。

window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）

使用方法：

setItem() getItem() removeItem()