一、构建 HTML5 徽标：使用缩放和语义标签在画布上绘图
在本章中，您将学习以下内容:
-
在画布上绘制路径
-
将文本放置在画布上
-
坐标变换
-
画布上绘制的文本字体和其他元素中的文本字体
-
语义标签
-
范围输入元素
介绍
这一章的项目是一个官方 HTML5 标志的演示，并附有文字。徽标的盾和字母绘制在画布元素上，附带的文本演示了语义标签的使用。观众可以使用滑动输入设备来改变标志的大小。对于这本书来说，这是一个合适的开始，这是一个利用 HTML5、JavaScript 和其他技术的项目集，因为它的主题很好地回顾了 HTML5 中基本的事件驱动编程和其他重要特性。我开发这个项目的方式，建立在其他人的工作之上，是我们大多数人的典型工作方式。特别是，环境提供了使用坐标变换的动机。
本书的方法是在具体示例的上下文中解释 HTML5、级联样式表(CSS)和 JavaScript 章节。这些项目代表了各种各样的应用，希望你能在每一个项目中发现一些你可以学习和适应的东西。
注意
如果你需要使用 HTML5 和 JavaScript 编程的入门，可以查阅我的书，html 5 的基本指南或者 Apress 等出版的其他书籍。网上也有相当多的材料，例如 W3Schools。
图 1-1 显示了 Chrome 浏览器上徽标项目的打开屏幕。重要的是要认识到浏览器可能是不同的。当我第一次写这个例子时，看看这是如何在 Firefox 中出现的。
图 1-1
HTML5 徽标的打开屏幕
请注意滑块功能、附带的文本(包含看似超链接的内容)以及黄线下方页脚中的文本。页脚还包括一个超链接。正如我稍后将解释的，页脚和任何其他语义元素的功能和格式完全由我决定，但提供给徽标所有者的参考，万维网联盟将被视为一种适当的使用。
观众可以使用滑块来改变标志的大小。图 1-2 显示了滑块调整后的应用，显示徽标的宽度和高度缩小到原来的三分之一。
图 1-2
徽标缩小
HTML5 在所有浏览器中的实现都是完整的，或者说非常接近。然而，我想给你看一些过去的东西来说明术语优雅的退化。图 1-3 显示了老款火狐浏览器的打开屏幕。范围输入被视为文本。注意，初始值显示为 100。
图 1-3
使用 Firefox 的应用程序
作为每一章的实践，我现在解释应用程序的关键需求，或多或少地独立于 HTML5 实现的事实，然后描述 HTML5、JavaScript 和其他实现中需要使用的技术的特性。“构建”部分包括一个表格，其中有每行代码的注释和构建类似应用程序的指南。“测试”部分提供了上传和测试的详细信息。这一部分在某些项目中比其他项目更重要。最后，有一个“总结”部分，回顾了涵盖的编程概念，并预览了本书的下一步内容。
项目历史和关键要求
这个项目的关键需求有些人为，不容易从 HTML 中分离出来。例如，我想画标志，而不是从网上复制图像。我的设计目标总是包括想练习编程和为我的学生准备例子。徽标盾牌部分的形状似乎适合在画布上绘制，HTML 字母可以使用绘制文本功能来完成。此外，绘制图像而不是使用图像文件也有实际优势。需要管理、存储和下载单独的文件。图 1-4 所示图像为 90KB。保存程序代码的文件只有 4KB。绘制徽标或其他图形意味着可以使用代码动态更改比例和其他属性。
图 1-4
徽标的图像
我在网上找了一个丹尼尔·戴维斯做的盾牌的例子。这太棒了，因为这意味着我不必测量一份徽标图像来获得坐标。这就引出了他是如何确定坐标的问题。我不知道答案，尽管我们愉快地交换了电子邮件。一种可能是下载图像并使用图像处理程序(如 Adobe Photoshop 或 Corel Paint Shop Pro)的网格功能。另一种可能是使用(老式的)透明绘图纸。
然而，在丹尼尔·戴维斯的工作基础上有一个问题。他的申请不包括 HTML 字母。解决这个问题的方法是在屏幕上定位字母，然后向下移动，也就是说，使用丹尼尔的例子中提供的坐标来定位盾牌的图形。“向下移动屏幕”的技术术语是执行坐标转换。因此，执行坐标转换的能力成为这个项目的一个关键需求。
我选择写一些关于这个标志的东西，特别是，以超链接的形式给出信用和参考。我决定在文档底部的一行下面引用徽标的官方来源作为简短的文本。提到丹尼尔·戴维斯是正文写作的一部分。我们就字体的选择交换了意见，我将在下一节详细讨论。
为了给观众一些与标志有关的东西，我决定呈现一种改变尺寸的方法。一个好的方法是使用一个滑块，指定最小和最大值以及步长。因此，这个应用程序的关键需求包括绘制特定字体的形状和字母、坐标转换、用主要部分和脚注部分格式化文档，以及包含超链接。
HTML5、CSS 和 JavaScript 特性
我假设读者对 HTML 和 HTML5 文档有一些经验。HTML5 中最重要的新特性之一是用于绘图的 canvas 元素。我简要描述了适当颜色和填充文本的填充路径的绘制。接下来，我描述坐标转换，在这个项目中使用的标志本身的两个部分和缩放，改变整个标志的大小。最后，我描述了范围输入元素。这就产生了滑块。
在画布上绘制路径
Canvas 是 HTML5 中引入的一种元素。所有画布元素都有一个被称为 2D 上下文的属性(也称为属性)。上下文有一些绘图方法，您将会看到它们的使用。通常，在加载文档后，会将一个变量设置为该属性:
ctx = document.getElementById('canvas').getContext('2d');
理解 canvas 是一个好名字很重要:代码将颜色应用于画布的像素，就像 paint 一样。稍后编写的代码可以在画布上放置不同的颜色。旧颜色看不出来。即使我们的代码使矩形、形状和字母出现，这些不同的实体并不保留它们作为要被重新定位的对象的身份。
用累加的结果连续绘制六条填充路径，产生盾牌，如图 1-5 所示。检查代码时可以参考这张图。请记住，在坐标中，第一个数字是距画布左边缘的距离，第二个数字是距画布上边缘的距离。
图 1-5
绘制徽标的路径顺序
顺便说一句，我选择给你看有累积结果的序列。如果我展示所画的东西，你将看不到构成五子棋左侧的白色部分。您可以看到它，因为它是橙色顶部的两条白色填充路径。
所有的绘制都是使用保存 canvas 元素的 2D 上下文属性的ctx变量的方法和属性来完成的。任何后续填充操作的颜色是通过将颜色分配给 canvas 上下文的fillStyle属性来设置的。
ctx.fillStyle = "#E34C26";
这种以十六进制格式给出的特殊颜色(其中前两个十六进制(16 进制)数字代表红色，后两个十六进制数字代表绿色，最后两个代表蓝色)是由 W3C 网站提供的，与其他颜色一起，作为盾牌背景的特殊橙色。这可能违反直觉，但在这个系统中，白色是由值#FFFFFF指定的。把这想象成所有颜色一起构成白色。缺少的颜色是黑色，由#000000指定。徽标中 5 右侧使用的珍珠灰色具有值#EBEBEB。这是一个高值，接近白色。你不需要记住这些值中的任何一个，但是知道黑色和白色是有用的，一个纯红色是#FF0000，一个纯绿色是#00FF00，一个纯蓝色是#0000FF。您可以使用 Adobe Photoshop、Corel Paint Shop Pro 等绘图程序中的吸管/拾色器工具或在线工具 http://pixlr.com/ 找出图像或中的颜色值。您可以对官方图像使用官方名称(如果有)。
所有绘图都是使用二维坐标系完成的。形状是使用路径方法生成的。这些假设了当前位置，您可以将它想象为画笔或油漆刷在画布上的位置。关键方法是移动到一个位置，并建立一条从当前位置到指定位置的线路。下面一组语句从左下角开始绘制五边形橙色。closePath方法通过画一条回到起点的线来封闭路径。
ctx.fillStyle = "#E34C26";
ctx.beginPath();
ctx.moveTo(39, 250);
ctx.lineTo(17, 0);
ctx.lineTo(262, 0);
ctx.lineTo(239, 250);
ctx.lineTo(139, 278);
ctx.closePath();
ctx.fill();
如果你没有在画布上画过任何东西，下面是生成五边形所需的整个 HTML 脚本。标签<body>中的onLoad属性导致在加载文档时调用init函数。init函数设置ctx变量，设置fillStyle属性，然后绘制路径。
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Logo</title>
<meta charset="UTF-8">
<script>
function init() {
ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = "#E34C26";
ctx.beginPath();
ctx.moveTo(39, 250);
ctx.lineTo(17, 0);
ctx.lineTo(262, 0);
ctx.lineTo(239, 250);
ctx.lineTo(139, 278);
ctx.closePath();
ctx.fill();
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="600" height="400">
Your browser does not support the canvas element.
</canvas>
</body>
</html>
如果你以前没有在画布上画过画，请练习和尝试，但我会继续下去。其他形状以类似的方式产生。顺便说一句，如果你在盾牌中间看到一条线，这是一种视错觉。
在画布上和文档正文中放置文本
使用上下文的方法和属性在画布上绘制文本。可使用fillText方法填充文本，或使用strokeText方法绘制轮廓。颜色是当前fillStyle属性或strokeStyle属性的颜色。上下文的另一个属性是font。该属性可以包含文本的大小和一种或多种字体。包含多种字体的目的是在运行浏览器的计算机上第一种字体不可用时为浏览器提供选项。对于这个项目，我使用
var fontfamily = "65px 'Gill Sans Ultra Bold', sans-serif";
并且在init功能中
ctx.font = fontfamily;
这将指导浏览器使用 Gill Sans Ultra Bold 字体(如果可用),如果不可用，则使用计算机上的任何默认 sans serif 字体。
我本可以把这些都放在一个语句中，但是我选择把它变成一个变量。你可以决定我选择的字体是否足够接近 W3C 的官方标志。
注意
对于这个例子，至少还有另外两种方法。一种可能是而不是使用文本，而是将字母绘制成填充路径。另一种方法是定位并获取一种字体，将其放在保存 HTML5 文档的服务器上，并使用@font-face直接引用它。
设置好字体和颜色后，绘制文本的方法需要一个字符串和一个位置:x 和 y 坐标。这个项目中绘制字母的语句是
ctx.fillText("HTML", 31,60);
在 HTML 文档的其余部分，也就是在 canvas 元素之外格式化文本，需要同样注意字体。在这个项目中，我选择使用 HTML5 中新的语义元素，并遵循将格式放入样式元素中的做法。我的 HTML 脚本主体包含两个文章元素和一个页脚元素。一篇文章包含带有注释的输入元素，另一篇文章包含其余的解释。footer 元素包含对 W3C 的引用。格式化和使用这些取决于开发人员/程序员。这包括确保页脚是文档中的最后一项。如果我将页脚放在一篇或两篇文章之前，它将不再显示在底部，即文档的底部。该项目的样式指令如下:
footer {display:block; border-top: 1px solid orange; margin: 10px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold;}
article {display:block; font-family: Georgia, "Times New Roman", Times, serif; margin: 5px;}
每个样式都将这些元素的所有实例设置为显示为块。这将在前后放置一个换行符。页脚顶部有一个边框，在文本上方产生一行。两种样式都指定了四种字体的列表。因此，浏览器首先查看 Trebuchet MS 是否可用，然后检查 Arial，然后检查 Helvetica，如果仍然不成功，则使用系统默认的 sans serif 字体作为页脚元素。类似地，浏览器检查 Georgia，然后 Times New roman，然后 Times，如果不成功，则使用标准 serif 字体。这可能有点过了，但这是安全的操作方式。页脚文本以粗体显示，每篇文章周围有 5 个像素的边距。
包括字体在内的格式很重要。HTML5 提供了许多用于格式化以及将格式从结构和内容中分离出来的特性。您确实需要将画布上的文本与其他元素中的文本区别对待。
坐标变换
我已经给出了我使用坐标变换的动机，特别是继续使用一组坐标。回顾一下，坐标系是在画布上指定位置的方式。位置被指定为距原点的距离。对于二维画布，两个坐标是必要的:第一个坐标控制水平方向，通常称为 x，第二个坐标控制垂直方向，称为 y。一个讨厌的事实是，当绘制到屏幕上时，y 轴被翻转，因此垂直方向是从画布的顶部开始测量的。水平线是从左侧开始测量的。这意味着点(100，200)比点(100，100)更靠屏幕下方。
在 logo 项目中，我编写了代码来显示字母 HTML，然后移动原点来绘制 logo 的其余部分。打个比方，我知道我的房子在镇中心的位置，所以我可以给镇中心指路，然后给我的房子指路。我在徽标中绘制字母并“向下移动屏幕”的情况需要 translate 转换。平移是在垂直方向上完成的。翻译的数量存储在名为offsety的变量 I 中:
var offsety = 80;
...
ctx.fillText("HTML", 31, 60);
ctx.translate(0, offsety);
因为我决定为查看者提供一种改变徽标大小的方法，所以我使用了缩放转换。继续方向的类比，这相当于改变了单位。你可以用英里(或公里)给出一些方向，而用码、英尺或米，或者可能是块给出另一些方向。可以为每个维度单独进行缩放。在这个应用程序中，有一个名为factorvalue的变量，它由输入改变时调用的函数设置。该声明
ctx.scale(factorvalue, factorvalue);
更改水平和垂直方向的单位。
HTML5 提供了一种保存坐标系当前状态和恢复已保存内容的方法。如果您需要代码返回到以前的状态，这一点很重要。保存和恢复是使用所谓的栈完成的:后进先出。恢复坐标状态被称为弹出栈，保存坐标状态是将某个东西推到栈上。我的 logo 项目并没有充分利用这一点，但是如果你正在做更复杂的应用程序，这是需要记住去研究的。在 logo 项目中，我的代码保存了文档第一次加载时的原始状态。然后，在绘制徽标之前，它会恢复保存的内容，然后再次保存，以便下次使用。对于这种情况来说，这是大材小用，但这是一个很好的实践，以防我将来添加一些东西。自己做实验！绘制徽标的函数dologo开头的代码如下所示:
function dologo() {
var offsety = 80 ;
ctx.restore();
ctx.save();
ctx.clearRect(0,0,600,400);
ctx.scale(factorvalue,factorvalue);
ctx.fillText("HTML", 31,60);
ctx.translate(0,offsety);
// 5 sided orange background
ctx.fillStyle = "#E34C26";
ctx.beginPath();
ctx.moveTo(39, 250);
ctx.lineTo(17, 0);
ctx.lineTo(262, 0);
ctx.lineTo(239, 250);
ctx.lineTo(139, 278);
ctx.closePath();
ctx.fill();
// right hand, lighter orange part of the background
ctx.fillStyle = "#F06529";
ctx.beginPath();
ctx.moveTo(139, 257);
ctx.lineTo(220, 234);
ctx.lineTo(239, 20);
ctx.lineTo(139, 20);
ctx.closePath();
ctx.fill();
...
请注意，画布上先前绘制的任何内容都将被清除(擦除)。
使用范围输入元素
我称之为滑块的输入设备是新的 HTML5 输入type range，它被放置在 HTML 文档的主体中。我的放在一个 article 元素里面。此类型的属性和其他输入元素提供了指定初始值、最小值和最大值、最小增量调整以及查看者更改滑块时要采取的操作的方法。代码是
<input id="slide" type="range" min="0" max="100" value="100"
onChange="changescale(this.value)" step="10"/>
min、max、【初始】、step可以任意设置。因为我使用了百分比，并且因为我不想让标志变得比初始值大或者处理负值，所以我使用了 0 和 100。
在滑块的正确实现中，观察者看不到初始值或最大值或最小值。我的代码使用输入的百分比。表达式this.value被解释为这个元素的 value 属性，强调将切换到英语！术语this在 JavaScript 和其他几种编程语言中有特殊的含义。changescale函数获取由分配给onChange属性的参数指定的值，并使用它来设置名为factorvalue的全局变量(在任何函数外部声明的变量，因此它持久存在并可用于任何函数)。
function changescale(val) {
factorvalue = val / 100;
dologo();
}
浏览器将提供表单验证，这是 HTML5 规范的一部分，也就是说，浏览器将检查输入元素中的属性所指定的条件是否得到遵守。就减少程序员需要做的工作和性能提升而言，这可能是一个显著的生产力提升，因为由浏览器完成检查可能会更快。在 HTML5 logo 项目中，滑块的一个优点是查看者不需要关心值，而只需要移动设备。无法输入非法值。图 1-6 显示了在输入字段输入值 200 的结果。
图 1-6
在 Firefox 中显示比例为 200
画布具有固定的宽度和高度，并且在画布外部绘制，这是在缩放以接受数字并将它们拉伸到原始值的两倍时所做的，被忽略。
构建应用程序并使之成为您自己的应用程序
这个项目做一件事，它画标志。为此定义了一个函数dologo。非正式地说，这个计划的大纲是
-
init:初始化 -
dologo:以 HTML 字母开始画 logo，然后画盾牌 -
changescale:改变刻度
表 1-1 显示了功能之间的关系。第一次加载文档时调用dologo功能，之后每当缩放比例改变时调用。
表 1-1
html 5 Logo 项目中的函数
|
功能
|
调用/调用者
|
打电话
|
| --- | --- | --- |
| init | 由<body>标签中的onLoad属性的动作调用 | dologo |
| dologo | 由init和changescale调用 | |
| changescale | 由<input type="range"...>标签中的onChange属性的动作调用 | dologo |
dologo函数的编码将前面描述的技术结合在一起。特别是，代码恢复了原来的坐标系并清空了画布。
该应用程序中的全局变量是
var ctx;
var factorvalue = 1;
var fontfamily = "65px 'Gill Sans Ultra Bold', sans-serif";
如前所述，可以不使用fontfamily而是直接在代码中使用字符串。方便让ctx和factorvalue全球化。
表 1-2 显示了基本应用程序的代码，每一行都有注释。
表 1-2
html 5 Logo 项目的完整代码
|
代码行
|
描述
|
| --- | --- |
| <!DOCTYPE html> | 页眉 |
| <html> | 开始html标签 |
| <head> | 开始head标签 |
| <title>``HTML5 LogoT2】 | 完成title元素 |
| <meta charset="UTF-8"> | 什么时候 |
| <style> | 开始style标签 |
| footer {display:block; border-top: 1px solid orange; margin: 10px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold;} | 页脚的样式，包括上边框和字体系列 |
| article {display:block; font-family: Georgia, "Times New Roman", Times, serif; margin: 5px;} | 两篇文章的风格 |
| </style> | 关闭样式元素 |
| <!-- Start of script element --> | HTML comment |
| <script language="JavaScript"> | 开始script标签。注意:在 JavaScript 中大小写无关紧要 |
| var ctx ; | 变量来保存上下文；在所有图纸中使用 |
| var factorvalue = 1; | 设置缩放的初始值 |
| var fontfamily = "65px 'Gill Sans Ultra Bold', sans-serif"; | 为画布上绘制的文本设置字体 |
| function init() { | 开始init功能 |
| ctx = document.getElementById('canvas').getContext('2d'); | 设置ctx |
| ctx.font = fontfamily; | 为画布上绘制的文本设置字体 |
| ctx.save(); | 保存原始坐标状态 |
| dologo(); | 调用函数来绘制徽标 |
| } | 关闭功能 |
| /* dologo function definition . This is the main function. It uses factorvalue to change the scale.``*/ | JavaScript 中的多行注释 |
| function dologo() { | 开始dologo功能 |
| var offsety = 80 ; | 指定量来调整坐标以绘制标志的盾形部分 |
| ctx.restore(); | 恢复坐标的原始状态 |
| ctx.save(); | 保存它(压入栈)，以便可以再次恢复 |
| ctx.clearRect(0,0,600,400); | 擦除整个画布 |
| ctx.scale(factorvalue,factorvalue); | 使用滑块设置的值进行水平和垂直缩放 |
| ctx.fillText("HTML", 31,60); | 画出字母:HTML |
| ctx.translate(0,offsety); | 向下移动屏幕(画布) |
| // 5 sided orange background | 单行注释 |
| ctx.fillStyle = "#E34C26"; | 设置为官方亮橙色 |
| ctx.beginPath(); | 开始一条路 |
| ctx.moveTo(39, 250); | 移动到左下角的指定位置 |
| ctx.lineTo(17, 0); | 向上画一条线，再向左画一点 |
| ctx.lineTo(262, 0); | 向右画直线 |
| ctx.lineTo(239, 250); | 向下并稍微向左画线 |
| ctx.lineTo(139, 278); | 画一条线到盾的中间低点 |
| ctx.closePath(); | 关闭路径 |
| ctx.fill(); | 用指定的颜色填充 |
| // right hand, lighter orange part of the background | |
| ctx.fillStyle = "#F06529"; | 将颜色设置为官方的深橙色 |
| ctx.beginPath(); | 开始路径 |
| ctx.moveTo(139, 257); | 移动到中间点，靠近顶部 |
| ctx.lineTo(220, 234); | 向右稍微向上画一条线 |
| ctx.lineTo(239, 20); | 向右上方画线 |
| ctx.lineTo(139, 20); | 向左画线(指向中间) |
| ctx.closePath(); | 关闭路径 |
| ctx.fill(); | 用指定的颜色填充 |
| //light gray, left hand side part of the five | |
| ctx.fillStyle = "#EBEBEB"; | 将颜色设置为灰色 |
| ctx.beginPath(); | 开始路径 |
| ctx.moveTo(139, 113); | 水平移动到中间，垂直移动到中间 |
| ctx.lineTo(98, 113); | 向左画线 |
| ctx.lineTo(96, 82); | 向上画线，再向左一点 |
| ctx.lineTo(139, 82); | 向右画线 |
| ctx.lineTo(139, 51); | 排队 |
| ctx.lineTo(62, 51); | 向左画线 |
| ctx.lineTo(70, 144); | 向左下方画一条线 |
| ctx.lineTo(139, 144); | 向右画线 |
| ctx.closePath(); | 关闭路径 |
| ctx.fill(); | 用指定的颜色填充 |
| ctx.beginPath(); | 开始新的道路 |
| ctx.moveTo(139, 193); | 移动到中间点 |
| ctx.lineTo(105, 184); | 向左上方画线 |
| ctx.lineTo(103, 159); | 向左上方稍稍画一条线 |
| ctx.lineTo(72, 159); | 向左多画一条线 |
| ctx.lineTo(76, 207); | 向右下方稍稍画一条线 |
| ctx.lineTo(139, 225); | 向左下方画一条线 |
| ctx.closePath(); | 关闭路径 |
| ctx.fill(); | 用指定的颜色填充形状 |
| // white, right hand side of the 5 | |
| ctx.fillStyle = "#FFFFFF"; | 将颜色设置为白色 |
| ctx.beginPath(); | 开始路径 |
| ctx.moveTo(139, 113); | 从中品脱开始 |
| ctx.lineTo(139, 144); | 向下画线 |
| ctx.lineTo(177, 144); | 向右画线 |
| ctx.lineTo(173, 184); | 稍微向左下方画线 |
| ctx.lineTo(139, 193); | 向左下方多画一条线 |
| ctx.lineTo(139, 225); | 向下画线 |
| ctx.lineTo(202, 207); | 向右上方画线 |
| ctx.lineTo(210, 113); | 稍微向右上方画线 |
| ctx.closePath(); | 关闭路径 |
| ctx.fill(); | 填写白色 |
| ctx.beginPath(); | 开始新的道路 |
| ctx.moveTo(139, 51); | 移动到中间点 |
| ctx.lineTo(139, 82); | 下移 |
| ctx.lineTo(213, 82); | 向右移动 |
| ctx.lineTo(216, 51); | 稍微向右上方移动 |
| ctx.closePath(); | 关闭路径 |
| ctx.fill(); | 填写白色 |
| } | 关闭dologo功能 |
| // The changescale function, response to user input. | |
| function changescale(val) { | 用参数打开function changevalue |
| factorvalue = val / 100; | 将factorvalue设置为除以 100 的输入 |
| dologo(); | 调用函数来绘制徽标 |
| } | 关闭changevalue功能 |
| </script> | 关闭脚本元素 |
| </head> | 关闭头部元件 |
| | 文档的其余部分是主体元素 |
| <body onLoad="init();"> | 属性设置为调用init的 Body 标签 |
| <canvas id="canvas" width="600" height="400"> | 画布标签设置代码中要使用的尺寸和 ID |
| Your browser does not support the canvas element. | 不支持画布时出现的消息 |
| </canvas> | 关闭canvas标签 |
| <article> | 文章标签 |
| Scale percentage: <input id="slide" type="range" min="0" max="100" value="100" onChange="changescale(this.value)" step="10"/> | 滑块(范围)输入与设置 |
| Note: slider treated as text field in some browsers. | 注释要注意，滑块可能是文本字段；它仍然是可用的 |
| </article> | 文章结束标签 |
| <article>Built on <a href="``http://daniemon.com/tech/html5/html5logo/T2】 | 带有一些文本的文章标签，包括超链接 |
| <footer>HTML5 Logo by <a href="http://``www.w3.orgT2】 | 页脚标签和页脚内容，包括abbr元素 |
| </footer> | 页脚关闭标记 |
| </body> | 身体关闭 |
| </html> | HTML 关闭 |
您可以将此应用程序的全部或部分内容用于您自己的工作中。您可能想省略关于字体的注释。
测试和上传应用程序
这是一个简单的应用程序来测试和上传(和测试)，因为它是一个单一的文件。当修改范围输入元素和调用changescale功能时，变量factorvalue发生变化，可用于适应不同的屏幕。这个程序在不同的设备上运行良好。所谓的响应式设计的挑战将在第 10 章中讨论。
摘要
在这一章中，你学习了如何制作一个特定的绘图，并学习了制作其他类似应用程序的步骤。本章中使用的功能包括
-
小路
-
画布上的文本和正文中语义元素中的文本
-
范围输入元素及其关联的更改事件
-
坐标变换，即平移和缩放
-
字体集的规范
-
语义元素的样式，包括在页脚前加一条线的顶部边框
下一章将描述如何构建一个实用的应用程序来制作照片和形状的组合或剪贴画。它将在画布上绘图和创建 HTML 元素的技术与计算中的标准技术——对象——结合起来。它还使用坐标变换。
版权属于：月萌API www.moonapi.com，转载请注明出处
