- 交互式Web前端开发实践
- 冷亚洪
- 7891字
- 2020-11-28 16:45:24
2.4 HTML 5
2.4.1 HTML 5文档结构
HTML从版本1.0到版本5.0发生了巨大的变化，也做出了很大的改进。尤其是HTML 5对多媒体的支持更加强大。HTML 5新增了离线存储、新的文档对象模型、跨文档消息等功能，因此，HTML 5的应用越来越广泛，更多地应用于移动端的网页。
HTML 5的文档结构与HTML的文档结构类似，包括文档开始、结束的标签，文档的头部标签，文档的主体标签。HTML 5文档的基本结构如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
</body>
</html>
从以上的结构代码中可以看出，HTML 5的结构代码比以前的版本都简洁。结构代码中的标签都是前面介绍过的，这里就不赘述了。
2.4.2 HTML 5新增的结构标签及属性
为了适应浏览器的多样性，HTML 5中新增了一些结构标签和属性，以及取缔了一些没多大作用的标签和属性，下面详细进行介绍。
1.HTML 5新增的标签
HTML 5中新增的结构标签及描述如表2-11所示。
表2-11 HTML 5中新增的结构标签及描述
除command标签外，其他新增的标签都是双标签。
2.HTML 5被取缔的标签
HTML 5被取缔的标签及描述见表2-12。
表2-12 HTML 5被取缔的标签及描述
3.HTML 5新增的属性
HTML 5中新增的属性主要以表单属性为主，还有链接的相关属性（见表2-13）及其他属性（见表2-14）。新增的表单属性将在后面的HTML 5表单中进行介绍。
表2-13 新增的与链接相关的属性
表2-14 HTML 5新增的其他属性
对于HTML 5新增的功能，各个浏览器的支持程度不一致，主要是以新出的高版本浏览器为主。IE 9及以上的版本支持HTML 5的浏览，本书则以火狐浏览器作为案例的展示。
4.HTML 5中被取消的属性
HTML 5中取消了一部分以往版本中常用的属性，主要以能被其他的标签或样式设置所代替的为主，如align、bgcolor、text、valign等属性。
2.4.3 HTML 5音视频
在以往的网页中要播放音视频，浏览器都必须要安装相应的插件才能够播放，但是并不是所有的浏览器都有相应的插件。因此，与HTML 4相比，HTML 5新增了音频标签和视频标签，规定了一种包含音视频的标准方法，不需要浏览器再安装其他相应的插件。
1．音频标签
＜audio＞＜/audio＞标签是HTML 5中新增的标签，用来播放声音文件。支持三种音频格式：ogg、mp3和wav。
如果要在HTML 5页面中播放音频，需要使用＜audio＞标签的src属性指定要插入音频文件的源目标地址。＜audio＞标签的常用属性及描述见表2-15。
表2-15 ＜audio＞标签的常用属性及描述
＜audio＞标签还可以通过source属性添加多个音频文件。在＜audio＞与＜/audio＞之间插入的内容是提供给不支持＜audio＞标签的浏览器显示的。
【例2-9】音频标签。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>添加音频文件</title>
</head>
<body>
<audio controls="controls">
</audio>
</body>
</html>
程序的运行结果如图2-10所示。
图2-10 音频标签
2．视频标签
＜video＞标签是用来定义播放视频文件的，支持三种视频格式：ogg、mp4和WebM。与＜audio＞标签的用法一致，可以通过source属性添加多个视频文件。在＜video＞与＜/video＞之间插入的内容是为不支持＜video＞标签的浏览器显示的。＜video＞标签的常用属性及描述见表2-16。
表2-16 ＜video＞标签的常用属性及描述
由于＜video＞标签与＜audio＞标签用法一致，这里就不再举例了。
2.4.4 HTML 5表单
在Web应用中，经常会用到表单来设计登录或注册页面。在HTML 5中，表单的功能得到了加强，增加了一些属性及表单控件的类型，使表单的开发更快捷、更方便。
1．新增的表单控件
在HTML 5中新增了一些表单的控件，主要是＜input＞标签中type属性值（即输入类型）的增加。如表2-17所示，列出了HTML 5中新增的表单控件。
表2-17 ＜input＞标签新增的输入类型
这些输入类型全部都是＜input＞标签中的type属性值，且都是HTML 5中新增的输入类型。对于这些新增的表单控件，不管浏览器支持与否都可以使用。如果浏览器不支持，则会直接忽略，不会报错。
（1）color输入类型
该控件用于设置一个颜色的选择框，如：＜input type＝＂color＂name＝＂user＿color＂＞。在Firefox浏览器中显示出一个具有默认值为“#000000”的黑色颜色框，当单击这个颜色选择框后，弹出一个颜色选择器，如图2-11所示。用户可以在颜色选择器中选择自己需要的颜色。在不支持该输入类型的浏览器中则会被忽略，形成一个普通的单行文本输入框。
图2-11 color输入类型在火狐浏览器中的显示效果
这里的颜色是用一个RGB的颜色值表示的颜色。
（2）日期和时间控件
HTML 5中提供了多种选择日期和时间的输入类型，用于验证输入的日期。
•date：用于选取年、月、日。如＜input type＝＂date＂name＝＂user＿date＂＞。
•datetime：用于选取UTC时间，包括年、月、日、小时和分钟。如＜input type＝＂datetime＂name＝＂user＿datetime＂＞。但在浏览器显示该类型的日期输入类型时，呈现出的是一个单行文本输入框，并不能选择日期，而且也不对日期格式进行验证。
•datetime-local：用于选取本地时间，包括年、月、日、小时和分钟。如＜input type＝＂datetime-local＂name＝＂datetime＿local＂＞。
•time：用于选取时间、小时和分钟。如＜input type＝＂time＂name＝＂user＿time＂＞。
•month：用于选取年和月。如＜input type＝＂month＂name＝＂user＿month＂＞。
•week：用于选取年和第几周。如＜input type＝＂week＂name＝＂user＿week＂＞。
日期选择器所涉及的这几种选取日期的输入类型，在Chrome浏览器中的显示效果如图2-12所示。
图2-12 日期和时间控件在Chrome浏览器中的显示效果
在Firefox浏览器中则会被忽略，形成普通的单行文本输入框，如图2-13所示。
图2-13 日期和时间控件在火狐浏览器中的显示效果
其中可以选择月和日的日期类型的输入框，虽然会验证日期的格式，但是不会验证日期的准确性，也就是不会判断月份的大小月以及二月是否是闰月，所有的月份都是31天。每个能够选取日期类型的输入框右侧都具有一个删除图标按钮，一个附带步进按钮，一个单击后会弹出日期选择项的下拉框图标。选取的日期可以通过“删除图标”按钮删除，也可以通过步进按钮选择或者通过下拉框中的日期控件选择。
（3）range输入类型
用于设定一定范围内的数字值，通常表现为一个滑动条。可以用min属性设置最小值，用max属性设置最大值。如＜input type＝＂range＂name＝＂price＂min＝＂10＂max＝＂20＂＞。在Firefox浏览器中的显示效果如图2-14所示。
图2-14 range输入类型在火狐浏览器中的显示效果
当拖动滑块到一个位置后，提交表单，提交的数据中会显示出所拖动滑块拖动到的位置数值。
（4）search输入类型
用于设定搜索框，如关键词搜索＜input type＝＂search＂name＝＂key＿words＂＞, search类型显示出一个单行文本框的形式。在Firefox浏览器中显示的搜索框与普通的文本输入框无异，如要查看显示效果，请查看并运行例2-10以观效果。
（5）tel输入类型
用于定义一个电话号码的输入框，当鼠标光标移到输入框上面会显示一个信息提示框。但是电话号码的形式多种多样，很难有一个固定的模式。因此，仅仅用tel类型来定义电话号码是无法实现的，通常与pattern属性结合使用，利用pattern属性的正则表达式来规定电话号码的格式。如＜input type＝＂tel＂name＝＂phone＿number＂pattern＝＂^＼d｛11｝$＂＞定义了一个必须具有11位数字的手机号码输入框，当格式不正确时，输入框的边框会显示为红色，如图2-15所示。
图2-15 tel输入类型在火狐浏览器中的显示效果
（6）email输入类型
用于设置一个输入邮箱地址的输入框，当鼠标光标移到输入框上面会显示一个信息提示框。如＜input type＝＂email＂name＝＂user＿email＂＞。当在设置为email类型的输入框中输入一个不是邮箱地址的字符时，输入框的边框会显示为红色，如图2-16所示。
图2-16 email输入类型在火狐浏览器中的显示效果
email输入类型输入框的验证只能简单验证用户在输入框中输入的电子邮件的地址是否包含了“＠”符号且该符号不在第一个字符，不会真正验证电子邮件地址格式的正确性，即电子邮件地址写成“123＠”会被判断成正确的。
（7）URL输入类型
用于设置一个URL地址的输入框，当鼠标移到输入框上面会显示一个提示信息框。在该输入框中输入的内容必须是一个绝对的URL地址，否则输入框的边框就会显示为红色。如＜input type＝＂url＂name＝＂user＿url＂＞。在Firefox浏览器中的显示效果如图2-17所示。
图2-17 URL输入类型在火狐浏览器中的显示效果
这个地址输入框在输入URL地址时必须输入一个完整的绝对URL地址，包括传输协议，否则就会报错。只要有传输协议则不会出任何问题。传输协议可以使用HTTP或者FTP，本地的绝对URL地址也可以，即地址开头为“file:”。
（8）number输入类型
用于一个设置数值的输入框，当鼠标光标移到输入框上面会显示一个信息提示框。可以对输入的数值设定一个范围，分别用min属性设置最小数值，用max属性设置最大数值。如＜input type＝＂number＂name＝＂use＿age＂min＝＂14＂max＝＂100＂＞，在Firefox浏览器中的显示效果如图2-18所示。
图2-18 number输入类型在火狐浏览器中的显示效果
在Firefox浏览器中，当输入框失去焦点时会自动验证输入的值是否在控件所设置的限定范围内。如果不在设置的范围内，输入框失去焦点时，它的边框就会显示为红色，表示输入错误。
以上所列举的tel、email、url和number输入类型在Firefox浏览器中的验证错误都是以输入框失去焦点时，它的边框显示成红色为格式错误提示信息。在Chrome浏览器中则是以提交表单时验证输入值是否符合规范，如果不符合，提交时会在输入框位置弹出一个提示框显示规范要求信息。如果读者需要查看不同浏览器的运行效果，请自行运行例2-10的代码以查看运行效果。
【例2-10】 HTML 5新增表单控件。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新增表单控件</title>
</head>
<body>
<form>
color输入类型：<input type="color"name="user_color"><br>
date输入类型：<input type="date"name="user_date"><br>
datetime输入类型：<input type="datetime"name="user_datetime"><br>
datetime-local输入类型：<input type="datetime-local"name="datetime_local"
><br>
time输入类型：<input type="time"name="user_time"><br>
month输入类型：<input type="month"name="user_month"><br>
week输入类型：<input type="week"name="user_week"><br><br>
range输入类型：<input type="range"name="price"min="10"max="20"><br>
<br>
search输入类型：<input type="search"name="key_words"><br><br>
电话号码：<input type="tel"name="phone_number"pattern="^\d{11}$"><br>
<br>
电子邮箱：<input type="email"name="user_email"><br><br>
输入URL地址：<input type="url"name="user_url"><br><br>
年龄：<input type="number"name="use_age"min="14"max="100">
<input type="submit">
</form>
</body>
</html>
2．新增的表单属性
HTML 5新增的表单属性见表2-18。
表2-18 HTML 5新增的表单属性
针对以上的list属性，通过例2-11进行详细说明。
【例2-11】 list属性的应用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>list属性</title>
</head>
<body>
学校<input type="text"list="school">
<datalist id="school"style="display:none; ">
<option value="重庆工程学院">重庆工程学院</option>
<option value="重庆大学">重庆大学</option>
<option value="重庆工商大学">重庆工商大学</option>
</datalist>
</body>
</html>
程序的运行结果如图2-19所示。
图2-19 list属性
3.HTML 5新增的＜output＞标签
＜output＞标签是HTML 5中新增的一个表单控件，用来显示计算结果或脚本的运行结果。该标签必须包含在某个表单中，或者给它添加form属性。
【例2-12】 ＜output＞标签。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>output标签</title>
<script>
function res(){
document.getElementById("jieguo").value=document.getElementById
("shu").value;
}
</script>
</head>
<body>
<form oninput="res()">
请拖动滑块选择一个数值：
<input type="range"min="0"max="100"step="5"id="shu">
<output id="jieguo">50</output>
</form>
</body>
</html>
程序的运行结果如图2-20所示。
图2-20 应用＜output＞标签后的显示效果
当拖动滑块时，＜output＞标签所在的表单就会接收到用户的输入信息，并将脚本运行结果显示在＜output＞标签中。
4．表单的自动验证
在HTML 5中，表单可以实现简单的自动验证。对于表单控件实现的简单自动验证功能基本上是由一些新增的表单控件属性实现的。下面介绍几个常用的自动验证属性。
（1）required属性
required属性设置输入型表单控件为必填项。表单提交时，如果设置了required属性的表单控件内容为空，则不允许提交，且会出现提示用户出错的信息。
（2）pattern属性
pattern属性是为表单控件设置正则表达式所使用的属性。提交表单时，会自动验证表单控件中的输入值是否符合正则表达式所规定的格式规则，如果不符合格式规则，则不允许提交表单，并会有错误提示。
（3）max属性和min属性
max和min这两个属性主要用在range输入类型和日期类型的表单控件中，限定其输入数字或日期的范围，超出该范围，则表单提交时会自动验证并报错。
（4）step属性
step属性限定输入数值递增或递减的梯度，如果不符合该梯度值的设置，表单提交时同样会自动验证并报错。
2.4.5 HTML 5画布
在HTML 5中新增了很多的功能，其中最显著的功能就是可以直接在HTML页面中绘制图形。这里所说的绘制图形并不是用鼠标绘画，而是通过HTML 5新增的＜canvas＞标签创建一块矩形区域，然后再通过JavaScript控制添加图片或绘制线条、文字和图形，甚至可以加入动画。＜canvas＞标签所创建出来的这块区域被称为画布。
1.＜canvas＞标签
＜canvas＞标签是HTML 5中新增的一个很重要的标签，专门用来在页面上绘制图形。但实际上＜canvas＞标签自身并不绘制图形。它相当于一张空白的画布，如果需要绘制图形，必须使用JavaScript脚本进行绘制。创建一对＜canvas＞＜/canvas＞标签，即在页面中放置了一个可以绘图的画布，该画布可以通过样式来设置区域的宽度和高度。
【例2-13】 ＜canvas＞标签创建绘图画布。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas标签</title>
</head>
<body>
<canvas id="mycanvas" width="200" height="200" style="border:1px solid #
000; ">
</canvas>
</body>
</html>
程序的运行结果如图2-21所示。
图2-21 用＜canvas＞标签创建的画布在火狐浏览器中的显示效果
在图2-21中创建了一个宽度为200像素、高度为200像素的画布。由于创建的画布只是一个矩形区域，没有任何特征，在浏览器中只会显示为空白，看不到效果。因此，通过样式设置给它添加了一个黑色边框，使其能够展现在我们眼前，从而看见画布的区域范围。另外为该＜canvas＞标签设置了一个ID名，主要是因为＜canvas＞标签内绘制图形都是通过JavaScript脚本进行控制的。没有ID, JavaScript程序代码要找到＜canvas＞标签这个对象是很困难的，因此我们在创建＜canvas＞对象时都会给它添加一个ID名称以便通过脚本查找对象。
2．绘制图形
在＜canvas＞标签中绘制图形的步骤如下。
第一步：获取＜canvas＞标签对应的DOM对象，这是一个canvas对象。
第二步：调用canvas对象的getContext（）方法，返回一个CanvasRenderingContext2D对象，用该对象即可绘制图形。
第三步：调用CanvasRenderingContext2D对象的方法绘制图形。
在以上的步骤中，canvas对象的getContext（）方法用来选择在画布上绘制图形的类型。这里有“2d”和“3d”可供选择，但只有“2d”是当前的唯一合法值，可指定为二维绘图。将来如果＜canvas＞标签扩展到支持3D绘图，getContext（）方法可能允许传递一个“3d”字符串参数来进行3D绘图。getContext（）方法的返回值是一个CanvasRenderingContext2D对象，使用它可以在＜canvas＞标签对象中绘图。
用＜canvas＞标签绘制图形有两种方式：填充（fill）和绘制边框（stroke）。填充是填满图形的内部区域；绘制边框是不填充图形的内部，只绘制图形的边框。
这两种绘制图形的方式分别有各自的样式设置：填充图形方式的样式采用fillStyle属性设置；绘制图形边框方式的样式采用strokeStyle属性设置；线条的粗细样式采用lineWidth属性设置。
（1）绘制矩形
在canvas对象中绘制矩形有两种方式，即填充一个矩形区域和绘制一个矩形边框。表2-19中分别列举了矩形绘制两种方式的定义。
表2-19 矩形绘制两种方式的定义
以上定义中，context指的是getContext（）方法返回的CanvasRenderingContext2D对象，画布的左上角为坐标原点，矩形的起点为矩形的左上角。
【例2-14】绘制矩形。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绘制矩形</title>
</head>
<body>
<canvas id="myrect"width="400"height="200"style="border:1px solid
#000; "></canvas>
<script type="text/javascript">
var cvs=document.getElementById("myrect");
var context=cvs.getContext("2d");
context.fillRect(50,50,120,80);
context.strokeRect(200,50,120,80);
</script>
</body>
</html>
程序的运行结果如图2-22所示。
图2-22 绘制矩形
例2-14中通过fillRect（50,50,120,80）和strokeRect（200,50,120,80）填充了一个起点坐标为（50,50）、宽为120像素、高为80像素的矩形区域，和绘制了一个起点坐标为（200, 50）、宽为120像素、高为80像素的矩形边框。在没有样式设置的情况下，默认的填充颜色和线条颜色均为黑色。如果要对绘制的图形设置样式，可以通过表2-20中的方法设置。
表2-20 绘制图形样式来设置图形的属性
绘制图形时，填充颜色和边框的颜色分别通过fillStyle属性和strokeStyle属性来设置。颜色值可以使用普通的英文颜色名称、样式表中的十六进制颜色值或者rgb（0～255, 0～255,0～255）函数、rgba（0～255,0～255,0～255,0～1）函数来表示。
【例2-15】绘制具有颜色样式的矩形。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绘制具有颜色样式的矩形</title>
</head>
<body>
<canvas id="myrect"width="400"height="200"style="border:1px solid
#000; "></canvas>
<script type="text/javascript">
var cvs=document.getElementById("myrect");
var context=cvs.getContext("2d");
context.fillStyle="#f0f";
context.fillRect(50,50,120,80);
context.fillStyle="rgba(255,0,0,0.6)";
context.fillRect(30,70,120,80);
context.strokeStyle="rgb(0,255,0)";
context.lineWidth=10;
context.strokeRect(200,50,120,80);
context.strokeStyle="yellow";
context.lineJoin="round";
context.strokeRect(185,70,120,80);
</script>
</body>
</html>
程序的运行结果如图2-23所示。
图2-23 绘制具有颜色样式的矩形
例2-15中通过fillStyle属性设置了矩形的填充颜色，strokeStyle属性设置了矩形的边框颜色。这两个属性都可以多次设置，绘制图形的颜色取决于在绘制图形前的最后一次颜色设置。颜色可以设置透明度。案例中的lineWidth属性是用来设置边框线条的宽度。lineJoin属性设置线条连接点的风格，lineJoin属性值可以为meter（默认）、round（圆）、bevel （斜面）。
（2）绘制字符
在canvas对象中绘制字符类似于绘制矩形，同样有两种方式，即fillText（）填充字符和strokeText（）绘制字符轮廓。定义格式如下：
fillText(text, x, y[, maxWidth]);
strokeText(text, x, y[, maxWidth]);
其中参数text为绘制的文字内容；（x, y）为绘制字符的起点坐标，正常情况下，以第一个字符的左上角为起点坐标；maxWidth为绘制字符的最大宽度。
样式设置还是采用fillStyle属性和strokeStyle属性；字符的字体样式通过font属性设置，并且按照font＝＂fontStyle fontVariant fontWeight fontSize/lineHeight fontFamily＂的顺序进行设置；字符的水平对齐方式通过textAlign属性设置，如图2-24所示；字符的垂直对齐方式通过textBaseline属性设置，如图2-25所示。
图2-24 绘制字符的水平对齐方式
图2-25 绘制字符的垂直对齐方式
【例2-16】绘制字符。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绘制字符</title>
</head>
<body>
<canvas id="mystr"width="500"height="300"style="border:1px solid
#000; "></canvas>
<script type="text/javascript">
var cvs=document.getElementById("mystr");
var str=cvs.getContext("2d");
str.fillStyle="rgb(255,0,0)";
str.font="normal bold 50px隶书";
str.textAlign="left";
str.textBaseline="top";
str.fillText("交互式Web前端开发",20,50,200);
str.fillText("交互式Web前端开发",20,120);
str.strokeText("交互式Web前端开发",20,200);
</script>
</body>
</html>
程序的运行结果如图2-26所示。
图2-26 绘制字符
（3）设置阴影
在canvas对象中绘制图形时可以设置阴影。可设置阴影的属性及其描述如表2-21所示。
表2-21 可设置阴影的属性及其描述
【例2-17】设置阴影。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置阴影</title>
</head>
<body>
<canvas id="mycvs"width="500"height="300"style="border:1px solid
#000; "></canvas>
<script type="text/javascript">
var cvs=document.getElementById("mycvs");
var context=cvs.getContext("2d");
context.fillStyle="rgba(255,0,0,1)";
context.shadowBlur=15;
context.shadowColor="#000";
context.shadowOffsetX=-10;
context.shadowOffsetY=-6;
context.fillRect(80,30,120,80);
context.strokeRect(280,30,120,80);
context.font="normal bold 50px隶书";
context.shadowColor="#f0f";
context.fillText("交互式Web前端开发",20,190);
context.strokeText("交互式Web前端开发",20,270);
</script>
</body>
</html>
程序的运行结果如图2-27所示。
图2-27 设置阴影
3．使用路径绘制图形
在＜canvas＞标签中使用路径可以绘制更复杂的图形。使用路径绘制图形的步骤如下。
第一步：调用CanvasRenderingContext2D对象的beginPath（）方法开始定义路径。
第二步：调用CanvasRenderingContext2D的各种方法添加子路径。
第三步：调用CanvasRenderingContext2D的closePath（）方法关闭路径。
第四步：调用CanvasRenderingContext2D的fill（）或stroke（）方法来填充或绘制路径。
（1）绘制直线
使用路径绘制直线将会使用到canvas对象中的一些方法，如表2-22所示。
表2-22 使用路径的方法及描述
上面的方法只是定义使用路径的方法，真正绘制确定的路径和图形却需要使用stroke（）方法在画布上绘制路径和使用fill（）方法来填充图像（默认是黑色）。
【例2-18】绘制矩形的对角线和使用路径绘制三角形。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绘制直线</title>
</head>
<body>
<canvas id="myline"width="400"height="300"style="border:1px solid
#000; ">
</canvas>
<script type="text/javascript">
var cvs=document.getElementById("myline");
var context=cvs.getContext("2d");
context.strokeRect(50,20,120,80);
context.beginPath();
context.moveTo(50,20);
context.lineTo(170,100);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(200,120);
context.lineTo(300,250);
context.lineTo(100,250);
//context.lineTo(200,120);
//context.closePath();
context.lineWidth=5;
context.stroke();
context.fillStyle="rgba(255,0,0,0.6)";
context.fill();
</script>
</body>
</html>
程序的运行结果如图2-28所示。
图2-28 例2-18的运行结果
（2）使用arcTo（）方法绘制圆弧
使用arcTo（）方法可以向canvas对象的当前路径上添加一段圆弧。格式如下：
arcTo(x1, y1, x2, y2, radius)
通过arcTo（）方法绘制圆弧的方式如下：假设从当前点到P1（x1, y1）绘制一条线条，再从P1（x1, y1）到P2（x2, y2）绘制一条线条，arcTo（）则绘制一段同时与上面两条线相切且半径为radius的圆弧，如图2-29所示。
图2-29 用arcTo（）方法绘制的圆弧
【例2-19】通过arcTo（）方法绘制一个圆角矩形。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绘制圆角矩形</title>
</head>
<body>
<canvas width="400"height="300"id="yjjx"style="border:1px solid#000; ">
</canvas>
<script type="text/javascript">
var djx=document.getElementById("yjjx").getContext("2d");
//绘制圆角矩形
/*
该方法绘制一个圆角矩形
x, y：圆角矩形左上角的坐标
width、height：控制圆角矩形的宽、高
radius：控制圆角矩形四个圆角的半径
*/
function creatroundrect(context, x, y, width, height, radius){
context.beginPath();
//移动到左上角
context.moveTo(x+radius, y);
//添加一条连接到右上角的线段
context.lineTo(x+width-radius, y);
//添加一段圆弧
context.arcTo(x+width, y, x+width, y+radius, radius);
//添加一条连接到右下角的线段
context.lineTo(x+width, y+height-radius);
//添加一段圆弧
context.arcTo(x+width, y+height, x+width-radius, y+height, radius);
//添加一条连接到左下角的线段
context.lineTo(x+radius, y+height);
//添加一段圆弧
context.arcTo(x, y+height, x, y+height-radius, radius);
//添加一条连接到左上角的线段
context.lineTo(x, y+radius);
//添加一段圆弧
context.arcTo(x, y, x+radius, y, radius);
context.closePath();
}
creatroundrect(djx,50,50,200,150,20);
djx.lineWidth=5;
djx.strokeStyle="#f0f";
djx.stroke();
</script>
</body>
</html>
程序的运行结果如图2-30所示。
图2-30 绘制圆角矩形
（3）使用arc（）方法绘制圆弧
使用arc（）方法也可以创建一段圆弧或曲线。格式如下：
arc(x, y, radius, startAngle, endAngle, [counterclockwise])
向canvas对象的当前路径上添加一段弧，绘制以（x, y）为圆心、radius为半径，从startAngle角度开始，到endAngle角度结束的圆弧。startAngle、endAngle以弧度作为单位。counterclockwise参数为可选项，规定应该逆时针还是顺时针进行绘图。设置为false则顺时针绘制圆弧，设置为true则为逆时针绘制圆弧。如需使用arc（）方法来创建一个圆形，请把起始角弧度设置为0，结束角弧度设置为2*Math.PI。使用arc（）方法绘制圆弧的示意图如图2-31所示。
图2-31 用arc（）方法绘制圆弧的示意图
【例2-20】通过arc（）方法绘制一个圆，1/4圆弧和一个闭合的3/4圆形。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>arc()方法绘制圆及圆弧</title>
</head>
<body>
<canvas width="400"height="300"id="mycircle"style="border:1px solid
#000; "></canvas>
<script type="text/javascript">
var cvs=document.getElementById("mycircle");
var context=cvs.getContext("2d");
context.arc(100,100,75,0,2*Math.PI, true);
context.fillStyle="rgba(255,0,0,0.6)";
context.fill();
context.beginPath();
context.arc(300,100,75,0,1.5*Math.PI, true);
context.stroke();
context.beginPath();
context.arc(250,200,75,0,1.5*Math.PI, false);
context.closePath();
context.stroke();
</script>
</body>
</html>
程序的运行结果如图2-32所示。
图2-32 用arc（）方法绘制圆及圆弧
【例2-21】圆的投影。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>圆的投影</title>
</head>
<body>
<canvas id="ty" width="400" height="300" style="border:1px solid #000;
background:#000; ">
</canvas>
<script type="text/javascript">
var tycanvas=document.getElementById("ty");
var ty=tycanvas.getContext("2d");
for(var i=0; i<10; i++){
ty.beginPath();
ty.arc(i*25, i*25, (i+1)*8,0,2*Math.PI);
ty.closePath();
ty.fillStyle="rgba(255,0,255, "+(10-i)*0.1+")";
ty.fill();
}
</script>
</body>
</html>
图2-33 圆的投影
程序的运行结果如图2-33所示。
使用路径还可以画出多边形、花朵、桃心、雪花、五角星、火柴人等更加复杂的图形，这里就不一一举例了，留给读者自己独立完成。
4．绘制颜色渐变的图形
在canvas对象上还可以绘制颜色渐变的图形。常用的有两种渐变形式：线性渐变和径向渐变。
（1）线性渐变
创建线性渐变的步骤如下。
第一步：调用createLinearGradient（xstart, ystart, xend, yend）方法创建一个线性渐变，该方法返回一个CanvasGradient对象。
第二步：调用CanvasGradient对象的addColorStop（float offset, string color）方法向渐变对象中添加颜色。参数offset控制添加颜色的点，是0～1之间的一个小数。0表示把颜色添加在起始点，1表示把颜色添加在结束点。参数color为添加的颜色值。
第三步：再将CanvasGradient对象赋值给fillStyle或strokeStyle属性即可。
【例2-22】线性渐变。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>线性渐变</title>
</head>
<body>
<canvas id="linegrad"width="400"height="280"style="border:1px solid
#000; "></canvas>
<script type="text/javascript">
var ctx=document.getElementById("linegrad").getContext("2d");
ctx.save();
ctx.translate(30,20);
//创建线性渐变
var lg=ctx.createLinearGradient(0,0,160,80);
//向线性渐变上添加颜色
lg.addColorStop(0.2, "#f00");
lg.addColorStop(0.5, "#0f0");
lg.addColorStop(0.9, "#00f");
//赋值
ctx.fillStyle=lg;
ctx.fillRect(0,0,160,80);
ctx.restore();
ctx.translate(280,160);
ctx.beginPath();
ctx.arc(0,0,80,0,2*Math.PI, true);
ctx.closePath();
ctx.lineWidth=12;
//创建线性渐变
var lg2=ctx.createLinearGradient(-40, -40,80,50);
//向线性渐变上添加颜色
lg2.addColorStop(0.1, "#ff0");
lg2.addColorStop(0.4, "#0ff");
lg2.addColorStop(0.8, "#f0f");
ctx.strokeStyle=lg2;
ctx.stroke();
</script>
</body>
</html>
程序的运行结果如图2-34所示。
图2-34 线性渐变
（2）径向渐变
调用createRadialGradient（sx, sy, sr, ex, ey, er）方法创建径向渐变，与线性渐变的步骤完全类似。其中，参数sx、sy为渐变开始时圆的圆心坐标，sr为渐变开始时圆的半径；参数ex、ey为渐变结束时圆的圆心坐标，er为渐变结束时圆的半径。
【例2-23】径向渐变。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>径向渐变</title>
</head>
<body>
<canvas id="rg" width="400" height="280" style="border:1px solid #000; "></
canvas>
<script type="text/javascript">
var cvs=document.getElementById("rg").getContext("2d");
cvs.save();
cvs.translate(30,20);
var rg=cvs.createRadialGradient(80,40,5,80,40,60);
rg.addColorStop(0.2, "#f00");
rg.addColorStop(0.5, "#0f0");
rg.addColorStop(0.9, "#00f");
cvs.fillStyle=rg;
cvs.fillRect(0,0,160,80);
cvs.restore();
cvs.translate(280,160);
cvs.beginPath();
cvs.arc(0,0,80,0,2*Math.PI);
cvs.closePath();
var rg2=cvs.createRadialGradient(0,0,5,0,0,80);
rg2.addColorStop(0.1, "#ff0");
rg2.addColorStop(0.4, "#0ff");
rg2.addColorStop(0.8, "#f0f");
cvs.fillStyle=rg2;
cvs.fill();
</script>
</body>
</html>
程序的运行结果如图2-35所示。
图2-35 径向渐变
canvas画布功能是HTML 5中新增的一个很重要的功能，这里只介绍了一些基础知识及使用画布绘制图形的常用功能。其余的很多功能，如果读者感兴趣可以再深入研究。