HTML 5 基础知识，第 4 部分: 最后的完善

时间：2016-07-13 21:12 来源：作者：浏览：次收藏挑错推荐打印

HTML5 作者集设计者和开发者于一身，他们的主要任务就是构建高效的丰富 Internet 应用程序 (RIA)，尤其是富 UI。我所说的高效是指进行系统的、全面的改进，以数字的方式为站点所有者、所有者代理和站点使用者之间的对话提供便利。
RIA 是满足用户体验的本源和工具，因此也是任何以网络为中心的成功企业的关键组成部分。实质上，以网络为中心的活动在某种程度上是协作性的活动。当机构想在各个级别（包括市场营销和管理）上取得成功时，实现数字协作的成功方法至关重要。站点的成功主要取决于站点满足访问用户的质量要求的效率。
如您所见，HTML5 是专门为实现具有跨平台功能、融合电信、统一语言、广泛计算和开源系统的协作式 “网络世界” 而量身定制的。本系列的前 3 篇文章主要关注语义、适合的编码方法、输入在关键转换过程中所扮演的角色以及站点管理的最佳实践，所有这些都是为创建有组织的、符合逻辑的 RIA 打下基础。贯穿每篇文章共同线索是丰富用户体验的创建和管理对于实现站点所有者的代理目标的重要性。HTML5 Canvas 在开发高效 RIA 的过程中扮演重要角色。

常用缩略语

2D：二维
Ajax：异步 JavaScript + XML
API：应用编程接口
HTML：超文本标记语言
HTML5：HTML 版本 5
UI：用户界面

什么是 Canvas？
HTML5 Canvas 是一个极其有用的绘制和动画元素。Canvas 使用 JavaScript 直接在页面上绘制图形。Canvas 能够定义和控制矩形区域，并允许以动态方式或通过脚本呈现 2D 形状和位图。
对于生成能够增强 UI、图表、相册、图形、动画和嵌入式绘制应用程序的出色视觉材料而言，HTML5 Canvas 非常完美。Canvas 元素可以通过几种方法来绘制路径、矩形、圆形和字符。
Canvas 坐标
在画布上进行绘制的前提条件是熟悉网格和坐标空间。空间区域的长度和宽度的单位为像素。用户可以围绕 x 和y 坐标构建画布。当坐标为 x=0, y=0 时，画布位于左上角。
矩形画布区域的默认宽度为 300 像素，高度为 150 像素，但您可以通过修改这两个属性来获得所需的画布大小。图 1 显示了如何实现 x 和 y 坐标。

图 1. 画布坐标
HTML 5 基础知识，第 4 部分: 最后的完善

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

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

开始
在向画布添加内容之前，必须先在 HTML 文件中定义画布，因此必须创建 JavaScript 代码，用它来访问 <canvas> 标记并与 HTML5 Canvas API 通信，这样就可以绘制图形。
<canvas> 标记的基本结构为：
<canvas id="myCanvas" width="200" height="200"></canvas>
canvas 元素有两个专有的属性：width 和 height。此外，Canvas 还拥有所有关键的 HTML5 属性，比如 class、id 和 name。在上面显示的代码中就用到了 id 属性。JavaScript 使用这里创建的画布 id 来识别要绘制内容的画布。JavaScript 使用 document.getElementById() 方法来确定正确的画布，如下所示：
var canvas = document.getElementById("myCanvas");
每个画布都必须有一个上下文定义，如下所示。到目前为止，官方的规范仅识别 2D 环境：
var context = canvas.getContext("2d");
在识别画布并指定其上下文之后，就可以在其上绘制内容了。
绘制工具、效果和变形
这里讨论 HTML5 Canvas 将用到的各种绘制工具、效果和变形。这些绘制工具包括：
线条
矩形
弧形
贝塞尔曲线和二次方曲线
圆形和半圆形
将使用的画布效果包括：
填充和笔触
线性渐变和辐射渐变
要讨论的变形包括：
缩放
旋转
转换
绘制线条
要在画布上绘制线条，可以使用 moveTo()、lineTo() 和 stroke() 方法。此外，还可以使用 beginPath() 方法来重新设置当前的路径：
context.beginPath();
Context.moveTo(x,y);
Context.lineTo(x,y);
Context.stroke(x,y);
beginPath() 方法将启用一个新路径。在使用不同的子路径绘制新的线条之前，必须使用 beginPath() 来表明绘制的新起点。首次绘制线条时没有必要调用 beginPath() 方法。
moveTo() 方法会声明新的子路径的开始点。lineTo() 方法用于创建子路径。可以通过 lineWidth 和 strokeStyle 改变线条的外观。lineWidth 元素用于改变线条的粗细，而 strokeStyle 则用于改变线条的颜色。
在图 2 中，分别绘制了蓝色、绿色和紫色的线条。

图 2. 画布中有 3 条颜色不同的线条
HTML 5 基础知识，第 4 部分: 最后的完善

图 2 中的线条是通过清单 1 中的代码创建的。蓝色的线条两端是圆角的，创建它的时候首先要确定一个新路径即将开始：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 像素的套盖。
运行并修改清单 1 的代码，以便更充分地了解如何绘制线条。

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

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55	`<!DOCTYPE HTML>` `<html>` `<head>` `<title>Line Example</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");` `// blue line with round ends` `context.beginPath();` `context.moveTo(50, 50);` `context.lineTo(300,50);` `context.lineWidth = 10;` `context.strokeStyle = "#0000FF";` `context.lineCap = "round";` `context.stroke();` `// green line with square ends` `context.beginPath();` `context.moveTo(50, 100);` `context.lineTo(300,100);` `context.lineWidth = 20;` `context.strokeStyle = "#00FF00";` `context.lineCap = "square";` `context.stroke();` `// purple line with butt ends` `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>`