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 重用和缩放效果

a house and people //定义组合图形房子 House with door //定义组合图形男人 Male human //定义组合图形女人 Female human

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

图7-16 投影效果

//定义线性渐变Grad1,默认水平方向 //复用线性渐变方案Grad1,定义垂直方向线性渐变Grad2和角形渐变Grad3 //分别使用3种渐变对象,填充3个图形的内部和边框 (3)使用feGaussianBlur元素,并结合translate、skewX等函数为图形定义经过高斯模糊的投影效果,如图7-3所示。

图7-17 投影效果

//定义高斯模糊滤镜drop-shadow //定义组合图形house //绘制两个图形,对第2个图形应用高斯模糊并作平移 第八章

1.简答题

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

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

联系客服:779662525#qq.com(#替换为@) 苏ICP备20003344号-4