HTML5及CSS3web前端开发技术习题答案解析

/*定义每次向下移动10个像素的变换矩阵*/ context.transform(1, 0, 0, 1, 0, 10); /*设定颜色*/ context.strokeStyle = colors[i]; /*绘制圆弧*/ context.beginPath(); context.arc(30, 110, 100, 0, Math.PI, true); context.stroke(); } } 第七章

1．简答题

（1）在网页中使用SVG与Canvas进行绘图，有哪些不同之处？ 附表列出了canvas绘图与SVG绘图的一些不同之处。

canvas canvas通过JavaScript来绘制2D图形 SVG SVG是一种使用XML描述2D图形的语言 canvas是逐像素进行渲染的。在 canvas 中，在SVG中，每个被绘制的图形均被视为对象。如果一旦图形被绘制完成，它就不会继续得到浏览SVG对象的属性发生变化，那么浏览器能够自动重器的关注。如果其位置发生变化，那么整个场现图形。 景也需要重新绘制，包括已被图形覆盖的对象。 依赖分辨率 不支持事件处理 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 不依赖分辨率 支持事件处理 最适合带有大型渲染区域的应用程序（比如谷歌地图） 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 不适合游戏应用

（2）列举出3种path元素用于绘制路径的命令有哪些？分别是什么功能？具体怎么定义？ path元素用来定义路径，使用这个元素可以实现任何其他的图形，不仅包括基本形状，也可以实现像贝塞尔曲线那样的复杂形状。例如：

命令 含义 参数 说明

M L H V A moveto lineto horizontal lineto vertical lineto elliptical Arc x,y x,y x y 将画笔移动到点(x,y) 画笔从当前的点绘制线段到点(x,y) 画笔从当前的点绘制水平线段到点(x,y0) 画笔从当前的点绘制竖直线段到点(x0,y) rx, ry x-axis-rotation large-arc-flag sweep-flag 画笔从当前的点绘制一段圆弧到点(x,y) x y x1, y1,x2 y2,x y x2 y2,x y x1 y1,x y x y 无参数 画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y) 特殊版本的三次贝塞尔曲线(省略第一个控制点) 绘制二次贝塞尔曲线到点(x,y) 特殊版本的二次贝塞尔曲线(省略控制点) 绘制闭合图形，如果d属性不指定Z命令，则绘制线段，而不是封闭图形。 C S Q T Z curveto smooth curveto quadratic curve smooth Belzier closepath Belzier quadratic

（3）stroke-dasharray属性在绘制虚线时如何设置，参数与虚线效果有什么关系？ stroke-dasharray属性用于绘制虚实线，其格式如下。stroke-dasharray=\……\ 该属性由一系列数字组成，这些数字必须用逗号隔开。属性中如果包含空格，不作为分隔符。每个数字定义了实线段的长度，分别是按照绘制、不绘制这个顺序循环下去。

（4）SVG使用linearGradient元素定义渐变色时，和元素的功能分别是什么？其中的offset属性和stop-color属性用于实现什么功能？

线性渐变就是一系列颜色沿着一条直线过渡，SVG也使用linearGradient元素定义线性渐变，并可以定义水平、垂直或角形的渐变。渐变的颜色可以由两种或多种颜色组成，每种颜色通过一个标记来定义。

使用linearGradient元素定义渐变的语法格式如下。linearGradient元素的属性中，id属性为渐变色指定唯一的名称，以便引用该渐变色。

渐变色的成员色使用stop元素定义，语法格式如下。

stop元素的offset属性用于定义该成员色的作用范围，该属性取值从0%到100%(或者是0到1)；通常第一种颜色设置成0%，最后一种设置成100%。

stop-color属性：定义该成员色的颜色。

stop-opacity属性：定义成员色的透明度，取值范围在0到1之间。

stop元素的属性也可以使用CSS定义，它支持class、id等标准HTML的属性。

2．操作题

（1）使用g、use、defs等元素，以及translate、scale等方法完成如图7-15所示效果，其中三个房子图案分别填充不同的颜色，每种形状后两个图案的缩放比例分别为0.8和0.6。

图7-15 重用和缩放效果

（2）使用linearGradient元素定义黑、黄、红三色组成的线性渐变，并复用此渐变色修改渐变色的方向，绘制如图7-16所示的四个圆角矩形。

图7-16 投影效果

图7-17 投影效果

1．简答题

（1）计算机、平板电脑、手机等电子类设备设备可以通过哪些途径获取地理位置信息？ IP地址。通过IP地址获取位置信息通常对有固定IP地址的设备很有效，但有时不够准确。 GPS。GPS定位较准确，它利用设备上的GPS芯片进行定位，误差范围可以缩小到几米之内。

移动电话基站或无线Wi-Fi。根据用户与移动电话基站或无线Wi-Fi热点的距离，通过三角定位的方式来获取位置信息，优点是定位速度较快，而且不需要配备精密的GPS芯片，缺点则是定位较粗略，误差范围可能是几米到几千米。