HTML5 基础知识，第 3 部分 HTML5 API 之应用-介绍HTML5 API 的用法和价值，Canvas 提供的创造性，以及Web storage的离线应用

本文链接：https://blog.csdn.net/weixin_47461068/article/details/105877507

HTML5 集设计者和开发者于一身，其主要任务就是构建高效的丰富 Internet 应用程序之富网络应用 (Rich Internet Application，简称RIA)，尤其是富 UI（User Interface，用户界面）。所说的高效是指进行系统的、全面的改进，以数字的方式为站点所有者、所有者代理和站点使用者之间的对话提供便利。

RIA 是满足用户体验的本源和工具，因此也是任何以网络为中心的成功企业的关键组成部分。实质上，以网络为中心的活动在某种程度上是协作性的活动。当机构想在各个级别（包括市场营销和管理）上取得成功时，实现数字协作的成功方法至关重要。站点的成功主要取决于站点满足访问用户的质量要求的效率。

如您所见，HTML5 是专门为实现具有跨平台功能、融合电信、统一语言、广泛计算和开源系统的协作式 “网络世界” 而量身定制的。符合逻辑的 RIA 是丰富用户体验的创建和管理，对于实现站点目标是重要的。HTML5 API 在开发高效 RIA 的过程中扮演重要角色。

一、什么是 API？

API是Application Programming Interface（应用程序编程接口）的缩写，它是编程指令集合和访问软件应用程序的标准。通过调用一个 API，可以利用 API 提供的服务设计出强大的产品。

HTML5 提供了一些 API：

用于渲染图形或其他可视图像的新 canvas 元素所使用的 2D 绘图 API
支持离线 Web 应用程序的缓存 API
使用新 video 和 audio 元素来播放视频和音频的 API
支持浏览历史访问和添加页面的历史 API
draggable 属性支持的拖放 API
contenteditable 属性支持的编辑 API
使用 JavaScript API 进行键-值对存储的客户端存储及嵌入式 SQL 数据库

二、什么是 Canvas？

HTML5 Canvas 是一个极其有用的绘制和动画元素。Canvas 使用 JavaScript 直接在页面上绘制图形。Canvas 能够定义和控制矩形区域，并允许以动态方式或通过脚本呈现 2D 形状和位图。

对于生成能够增强 UI、图表、相册、图形、动画和嵌入式绘制应用程序的出色视觉材料而言，HTML5 Canvas 非常完美。Canvas 元素可以通过几种方法来绘制路径、矩形、圆形和字符。

1. Canvas 坐标

在画布上进行绘制的前提条件是熟悉网格和坐标空间。空间区域的长度和宽度的单位为像素。用户可以围绕 x 和 y 坐标构建画布。当坐标为 x=0, y=0 时，画布原点位于左上角。如图1所示。

图 1. x、y坐标 xy坐标

矩形画布区域的默认宽度为 300 像素，高度为 150 像素，但您可以通过修改这两个属性来获得所需的画布大小。图2 显示了如何实现 x 和 y 坐标。

图 2. 画布坐标

图 2 显示了长宽都为 100 像素的画布区域：

左上角的坐标为 x=0, y=0。
x 值在水平方向增加，而 y 值在垂直方向增加。
右下角的坐标为 x=100, y=100。
中心点的坐标为 x=50, y=50。

2. 起步

在向画布添加内容之前，必须先在 HTML 文件中定义画布，必须创建 JavaScript 代码，用它来访问标记并与 HTML5 Canvas API 通信，这样就可以绘制图形。

标记的基本结构为：

canvas 标记有两个专有的属性：width 和 height。此外，Canvas 还拥有所有关键的 HTML5 属性，比如 class、id 和 name。在上面显示的代码中就用到了 id 属性。JavaScript 代码使用这里创建的画布 id 来识别要绘制内容的画布。

JavaScript代码使用 document.getElementById()方法来确定正确的画布：

var canvas = document.getElementById("myCanvas");

每个画布都必须有一个上下文对象定义。到目前为止，官方的规范仅识别 2D 环境（3D绘图通过“webgl”参数创建上下文对象，仅对支持WebGL的浏览器有效）：

var context = canvas.getContext("2d");

在识别画布并指定其上下文之后，就可以在其上绘制内容了。

3. 绘制工具、效果和变形

讨论描述HTML5 Canvas 将用到的各种绘制工具、效果和变形。

这些绘制工具包括：

线条
矩形
弧形
贝塞尔曲线和二次方曲线
圆形和半圆形

将使用的画布效果包括：

填充和笔触
线性渐变和辐射渐变

要讨论的变形包括：

缩放
旋转
转换

绘制线条

要在画布上绘制线条，使用到的方法：

context.beginPath();
context.moveTo(x,y);
context.lineTo(x,y);
context.stroke(x,y);

beginPath() 方法将启用一个新路径。在使用不同的子路径绘制新的线条之前，必须使用 beginPath()来表明绘制的新起点。首次绘制线条时没有必要调用 beginPath()方法。

moveTo()方法会声明新的子路径的开始点。lineTo()方法用于创建子路径。可以通过lineWidth和 strokeStyle改变线条的外观。lineWidth元素用于改变线条的粗细，而 strokeStyle 则用于改变线条的颜色。

方法moveTo()和lineTo()实际上并不画线，而是在结束canvas操作的时候，通过调用stroke()方法完成线条的绘制。

对上下文的很多操作都不会立即反映页面上。beginPath()、moveTo()、lineTo()这些函数都不会直接修改canvas的展示结果。canvas中很多用于设置样式和外观的函数也同样不会直接修改显示结果。只有当对上下文对象应用绘制方法stroke() 或填充方法fill()时，结果才会显示出来。

在图 3 中，分别绘制了蓝色、绿色和紫色的线条。

图 3. 画布线条

图 3 中的线条是通过 '清单 1' 中的代码创建的。

清单 1. 在画布上创建 3 个颜色不同的线条

<!DOCTYPE HTML>
<html>
    <head>
        <title>线条示例</title>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }

            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style>
        <script>
            window.onload = function() {
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");

                // 圆形端的蓝色线
                context.beginPath();
                context.moveTo(50, 50);
                context.lineTo(300,50);
                context.lineWidth = 10;
                context.strokeStyle = "#0000FF"; 
                context.lineCap = "round";
                context.stroke();

                // 方形端的绿色线
                context.beginPath();
                context.moveTo(50, 100);
                context.lineTo(300,100);
                context.lineWidth = 20;
                context.strokeStyle = "#00FF00"; 
                context.lineCap = "square";
                context.stroke();

                // 平头端的紫色线
                context.beginPath();
                context.moveTo(50, 150);
                context.lineTo(300, 150);
                context.lineWidth = 30;
                context.strokeStyle = "#FF00FF"; 
                context.lineCap = "butt";
                context.stroke();
            };
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="400" height="200">
        </canvas>
    </body>
</html>

蓝色的线条两端是圆角的，创建它的时候，首先要确定一个新路径即将开始：context.beginPath()。其创建过程如下所示：

context.moveTo(50, 50)，将路径的开始点置于 (x=50, y=50)
context.lineTo(300,50)，识别线条的结束点
context.lineWidth = 10，线条的宽度
context.strokeStyle = "#0000FF"，线条的颜色
context.lineCap = "round"，使线条的两端变圆
context.stroke()，真实地将线条绘制在画布上

上面的 3 个线条的长度都是 50 像素，但它们看起来不一样长，这是由线条两端套盖 (cap) 引起的视觉混淆。有 3 种可用的末端套盖：

context.round（圆形）
context.square（方形）
context.butt（平头形，默认）

butt 套盖是默认值。使用 round 或 square 套盖样式时，线条的长度将增加，增加的量为线条自身的宽度。例如，如果长度为 200 像素、宽度为 10 像素的线条采用 round 或 square 套盖样式，那么将导致线条的长度变为 210 像素，因为将在线条的两端各增加一个长度为 5 像素的套盖。如果长度为 200 像素、宽度为 20 像素的线条采用 round 或 square 套盖样式，那么将导致线条的长度变为 220 像素，因为将在线条的两端各增加一个长度为 10 像素的套盖。

绘制矩形

在画布上绘制矩形区域有 3 种方法：

fillRect(x,y,width,height)，绘制已填充的矩形
strokeRect(x,y,width,height)，绘制矩形框线
clearRect(x,y,width,height)，擦除矩形的给定区域使之完全透明

对于这 3 种方法而言，x 和 y 表示矩形在画布上相对于左上角的位置（x=0, y=0），而 width 和 height 分别是矩形的宽度和高度。

图 4 显示了由清单 2 中的代码创建的 3 个矩形区域。

图 4. 矩形画布

fillRect() 方法创建了一个矩形并使用默认的黑色填充它。clearRect()方法在第一个矩形的中心擦除一块矩形区域，该区域位于 fillRect() 方法所创建的矩形的中心。strokeRect()方法创建一个仅黑色边框可见的矩形。

清单 2. 矩形画布代码

<!DOCTYPE HTML>
<html>
<head>
    <title>Rectangle Example</title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        #myCanvas {
            border: 1px solid #000000;
            background-color: #ffff00;
        }
    </style>
    <script type="text/javascript">
         function drawShape(){
             var canvas = document.getElementById('myCanvas');
             var context = canvas.getContext('2d');

             context.fillRect(25,25,50,50);
             context.clearRect(35,35,30,30);
             context.strokeRect(100,100,50,50);

         }
     </script>
</head>
<body onload="drawShape();">
     <canvas id="myCanvas" width="200" height="200"></canvas>
</body>
</html>

绘制弧形、曲线、圆形和半圆形

绘制圆形和半圆形都使用 arc() 方法。arc() 方法接收 6 个参数：

context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);

centerX 和 centerY 参数是圆心的坐标。radius 的含义和其数学上半径的含义一样：表示从圆心到圆周的直线距离。所创建的弧形将作为圆形的一部分。startAngle 和 endAngle 参数分别为弧形的起点和终端，单位为弧度。anticlockwise 参数是一个布尔值。当其值为 true 时，弧形就逆时针绘制；当为 false 时，弧形就顺时针绘制。

要使用 arc() 方法绘制圆形，将起始角度定义为 0，结束角度为 2*PI，如下所示：

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

要使用 arc() 方法绘制半圆形，将结束角度定义为 startingAngle + PI，如下所示：

context.arc(centerX, centerY, radius, startingAngle, startingAngle + Math.PI, false);

二次方曲线

使用 quadraticCurveTo() 方法创建二次方曲线，如下所示。二次方曲线由上下文点、控制点和结束点定义。控制点确定线条的曲度。

context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, endX, endY);

贝塞尔曲线

与二次方曲线一样，贝塞尔（Bezier）曲线也有一个起始点和一个结束点；但与二次方曲线不同的是，它有两个控制点：

context.moveTo(x, y);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);

使用 bezierCurveTo() 方法来创建贝塞尔曲线。因为贝塞尔曲线通过两个而不是一个控制点来定义，所以可以创建更加复杂的曲线。

图 5 从左到右分别显示了弧形、二次方曲线、贝塞尔曲线、半圆形和圆形。

图 5. 弧形、曲线和圆形弧形画布

清单 3. 弧形、曲线和圆形的代码

<!DOCTYPE HTML>
<html>
<head>
    <title>圆弧，曲线，