网页前端设计-作业五（JavaScript）

参考教材：HTML5网页前端设计（第2版 ）  作者：周文洁

1 . 普通 （2分）在HTML5画布API中save()和restore()方法的作用是什么？

在HTML5画布中，save()和restore()方法是绘制复杂图形的快捷方式，用于记录或恢复画布的绘画状态。

2 . 普通 （2分）HTML5画布坐标系中的原点(0,0)位置是？

画布坐标系中原点的位置在画布矩形框的左上角，即(0,0)坐标的位置。

3 . 普通 （2分）在画布上绘制空心矩形与实心矩形分别使用的是哪种方法？

在HTML5中可以使用strokeRect()方法绘制带边框的空心矩形；在HTML5中使用fillRect()方法绘制填充颜色的实心矩形。

4 . 普通 （2分）文字的绘制有哪两种方法？有什么区别？

HTML5画布API提供了两种绘制文本的方法，fillText()方法用于绘制实心文本内容，strokeText()方法用于为文本内容描边。

5 . 容易 （2分）HTML5画布API中已知有，在JavaScript中使用var c = document.getElementById(" ___ ")可以获取当前画布对象。（区分大小写）

myTestID

必须用id名称来获取画布对象。

6 . 容易 （2分）HTML5画布API中使用ctx. ___ (0,0,100,100)方法可以清空画布上矩形区域的内容，且该矩形区域左上角(0,0)点，宽和高均为100像素。（区分大小写）

clearRect

ctx.clearRect(x,y,w,h)用于清空画布指定区域内容,其中(x,y)表示左上角坐标点，w和h表示清空区域的宽和高。

7 . 容易 （2分）HTML5画布API中ctx. ___(x,y)方法可以将当前画笔直线移动到指定的坐标(x,y)上，并且绘制出移动痕迹。（区分大小写）

lineTo

8 . 普通 （2分）创建画布使用的HTML5标签名称是？为何要给画布定义ID？

在HTML5中创建画布需要使用元素。其中标签的id属性为必填内容，使用JavaScript进行绘图时可根据id找到需要绘图的画布。

9 . 容易 （2分）HTML5画布坐标系中水平方向是___轴，垂直方向是 ___轴。

10 . 容易 （2分）在HTML5画布API中假设已有ctx表示2D画布上下文context对象，使用ctx. ___()方法可以用来剪裁画布。（区分大小写）

clip

ctx.clip()用于剪裁画布，可以配合ctx.arc()或ctx.rect()等方法剪裁圆形或矩形区域。

11 . 容易 （2分）HTML5画布API中ctx. ___(x,y)方法可以将当前画笔移动到指定的坐标(x,y)上，且不留下移动痕迹。（区分大小写）

moveTo

12 . 容易 （2分）HTML5画布API中___属性用于设置填充颜色， ___属性用于设置描边颜色。（区分大小写）

fillStyle、strokeStyle

13 . 容易 （2分）HTML5画布API提供了<___>标签用于在网页上创建画布区域。（区分大小写）

canvas

HTML5画布API提供了标签用于在网页上创建画布区域。

14 . 容易 （2分）HTML5画布API中假设已有ctx表示2D画布上下文context对象，ctx.arc(100,100,80,0,Math.PI*2,true)可以绘制一个圆心在(___)坐标点、半径为 ___像素的圆形，请填空。（区分大小写）

100,100、80

15 . 普通 （2分）HTML5画布API中初始默认的描边颜色是黑色。

正确

初始默认的描边颜色是黑色，可以在执行描边指令stroke()之前更改strokeStyle属性值来更换颜色。

16 . 普通 （2分）HTML5画布API中ctx.rotate(Math.PI/2)用于将画布中的图像逆时针旋转180度。

错误

Math.PI/2是90度，且正数为图像顺时针旋转，负数才是图像逆时针旋转。

17 . 普通 （2分）画布元素自带1像素宽的黑色实线边框效果。

错误

画布本身是无边框效果的，需要通过CSS样式代码来设置。

18 . 普通 （2分）可以直接使用当前浏览器不支持画布功能这句代码来测试浏览器是否支持HTML5画布API，首尾标签之间的文字只有浏览器不支持的时候才会显示。

正确

正确，浏览器支持时就直接显示画布元素本身了，此时内部的文字不会显示出来。反之，不能显示画布元素时就会显示内部的提示文字了。

19 . 普通 （2分）在HTML5画布坐标系中，画布正中心的点是(0,0)点，即原点。

错误

原点(0,0)在画布的左上角。

20 . 普通 （2分）同一个页面中允许有多个id名称不同的画布元素。

正确

因为画布对象是根据id名称来创建的，因此只要id名称不同就允许在同一个页面中存在多个画布元素。

21 . 普通 （2分）HTML5画布API中可以直接使用width和height属性为元素规定宽和高。

正确

正确，元素支持width和height属性。例如就表示宽100px、高50px的画布。

22 . 容易 （2分）HTML5画布API中假设已有ctx表示2D画布上下文context对象，且先后执行了4次ctx.save()方法。此时如果执行第1次ctx.restore()会导致ctx对象的颜色、样式等属性设置恢复到什么状态？（ ）。

A. 第1次执行ctx.save()之前的状态。

B. 第2次执行ctx.save()之前的状态。

C. 第3次执行ctx.save()之前的状态。

D. 第4次执行ctx.save()之前的状态。

restore()方法是从栈中取出最近一次的绘画状态，是倒过来的。

23 . 容易 （2分）HTML5画布API中假设已有ctx表示2D画布上下文context对象，且有img表示图像对象。以下哪个可以从画布的原点开始绘制此图，并且将原图尺寸更改为宽100像素、高80像素？（ ）。

A. ctx.drawImage(img, 0, 0, 80, 100);

B. ctx.drawImage(img, 0, 0, 100, 80);

C. ctx.drawImage(img, 50, 40, 100, 80);

D. ctx.drawImage(img, 40, 50, 80, 100);

ctx.drawImage(img, x, y, width, height);为正确格式，其中(x,y)表示绘制图像的左上角坐标位置，width表示宽度、height表示高度。

24 . 容易 （2分）HTML5画布API中假设已有ctx表示2D画布上下文context对象，以下哪个可以声明一个线性渐变区域（左上角为原点，宽100像素、高50像素的矩形）？（ ）。

A. ctx.createLinearGradient(0,0,100,50);

B. ctx.createLinearGradient(100,50,0,0);

C. ctx.createRadialGradient(0,0,100,50);

D. ctx.createRadialGradient(100,50,0,0);

createLinearGradient用于创建一个线性渐变区域，而createRadialGradient用于创建一个径向渐变区域。ctx.createLinearGradient(x1,y1,x2,y2);是正确格式，其中x1和y1是原点坐标，x2和y2是结束位置的偏移量。

25 . 容易 （2分）HTML5画布API中假设已有ctx表示2D画布上下文context对象，如何将图像向右移动100像素、向下移动50像素？（ ）。

A. ctx.translate(-100, 50);

B. ctx.translate(100, 50);

C. ctx.translate(-100, -50);

D. ctx.translate(100, -50);

translate(x, y)为正确格式，其中x填入水平方向偏移量、y填入垂直方向偏移量。本题向右移动是100、向左是-100；向下移动是50、向上移动是-50。

26 . 容易 （2分）HTML5画布API中假设已有ctx表示2D画布上下文context对象，如何将图像放大成宽为原先的2倍、高为原先的3倍？（ ）。

A. ctx.scale(2, 3);

B. ctx.scale(3, 2);

C. ctx.scale(1/2, 1/3);

D. ctx.scale(1/3, 1/2);

scale(x, y)为正确格式，其中x填入宽度的缩放倍数、y填入高度的缩放倍数。

27 . 容易 （2分）HTML5画布API中以下哪个属性可以用于设置图形的阴影颜色？（ ）。

A. shadowBlur

B. shadowOffsetX

C. shadowColor

D. shadowOffsetY

shadowColor是阴影颜色；shadowBlur是阴影模糊度；shadowOffsetX是x轴的偏移距离；shadowOffsetY是y轴的偏移距离。

28 . 容易 （2分）HTML5画布API中以下哪个属性可以用于设置线条粗细宽度？（ ）。

A. lineCap

B. lineJoin

C. lineDashOffset

D. lineWidth

lineWidth用于设置线条宽度；lineCap用于设置线段两边末端的形状；lineJoin用于设置线段之间连接处的拐角样式；lineDashOffset用于设置虚线样式时线段的偏移量。

29 . 容易 （2分）HTML5画布API中使用lineCap设置线条样式，以下哪个属性可以用于设置线段末端为半圆形凸起？（ ）。

A. butt

B. circle

C. round

D. square

round用于设置线段末端为半圆形凸起；butt为默认值表示末端以方形结束不凸起；square表示末端加了一个方形凸起，该方形的宽度与线段同宽、高度为宽度的一半。circle为干扰项，没有这个属性值。

30 . 容易 （2分）在HTML5画布API中，以下哪个函数可以用于绘制描边空心矩形？（ ）。

A. fillRect()

B. strokeRect()

C. fillText()

D. strokeText()

fillRect()用于绘制实心矩形，strokeRect()用于绘制描边空心矩形。

31 . 容易 （2分）在HTML5画布API中，以下哪个函数可以用于绘制实心文本？（ ）。

A. fillRect()

B. strokeRect()

C. fillText()

D. strokeText()

fillText()用于绘制实心文本，strokeText()用于绘制空心文本。

32 . 容易 （2分）在HTML5画布API中以下哪个属性可以用于更新画笔的填充颜色？（ ）。

A. strokeStyle

B. fillStyle

C. StrokeStyle

D. FillStyle

fillStyle属性用于更新填充颜色。

33 . 容易 （2分）在HTML5画布API中以下哪个属性可以用于更新画笔的描边颜色？（ ）。

A. strokeStyle

B. fillStyle

C. StrokeStyle

D. FillStyle

strokeStyle属性用于更新描边颜色。

34 . 容易 （2分）HTML5画布API中假设已有var c表示画布对象，以下哪个可以创建2D的画布上下文（context）对象？（ ）。

A. var ctx = c.createContext();

B. var ctx = c.createContext(‘2d’);

C. var ctx = c.getContext();

D. var ctx = c.getContext(‘2d’);

c.getContext(‘2d’)用于创建2D的画布上下文对象。

35 . 容易 （2分）HTML5画布API中哪种方法用于填充颜色？（ ）。

A. stroke()

B. fill()

C. closePath()

D. beginPath()

fill()用于填充颜色。

36 . 容易 （2分）HTML5画布API中假设已有ctx表示画布2D上下文对象，且有ctx.moveTo(10,10);用于将画笔初始位置定位在(10,10)坐标，后续以下哪段代码形成的轨迹是一个正方形？（ ）。

A. ctx.lineTo(20,10); ctx.lineTo(20,20);ctx.lineTo(10,20);ctx.closePath();ctx.stroke();

B. ctx.lineTo(10,20); ctx.lineTo(20,10); ctx.lineTo(20,20);ctx.closePath();ctx.stroke();

C. ctx.lineTo(20,20); ctx.lineTo(10,20); ctx.lineTo(20,10);ctx.closePath();ctx.stroke();

D. ctx.lineTo(10,10); ctx.lineTo(20,10); ctx.lineTo(10,20);ctx.closePath();ctx.stroke();

初始坐标在(10,10),然后水平方向向右画一条边长到(20,10)，再垂直向下画一条边长到(20,20)，接下来水平向左画一条边长到(10,20)，最后使用ctx.closePath();或者ctx.lintTo(10,10)都可以垂直向上画一条边长回到初始坐标位置(10,10)。

37 . 容易 （2分）HTML5画布API中哪句方法用于路径描边？（ ）。

A. beginPath()

B. closePath()

C. stroke()

D. fill()

stroke()是描边、fill()是填充。

38 . 容易 （2分）HTML5画布API中创建一个宽度为200px、高度为50px的画布，以下哪句代码正确？（ ）。

A.

B.

C.

D.

width表示宽度、height表示高度，并且属性值不需要加单位。

39 . 容易 （2分）HTML5画布API中关于画布坐标系以下说法不正确的是？（ ）。

A. 画布坐标系的水平方向为x轴。

B. 画布坐标系的垂直方向为y轴。

C. x轴的正方向是向右延伸。

D. y轴的正方向是向上延伸。

y轴的正方向是向下延伸。

40 . 普通 （2分）如何将指定元素设置为允许放置元素的目标区域？

作为可放置区域的元素必须带有ondragover事件。

41 . 普通 （2分）如何将元素设置为允许拖放的状态？

设置元素的draggable属性值为true。

42 . 容易 （2分）在HTML5拖放API中，effectAllowed属性的取值为___时表示只允许复制或移动操作。（区分大小写）

copyMove

43 . 容易 （2分）在HTML5拖放API中，effectAllowed属性的取值为___时表示只允许复制操作。（区分大小写）

copy

effectAllowed属性有9种取值，其中copy表示只允许复制操作。

44 . 普通 （2分）所有元素默认情况下都是可以被拖放的。

错误

一般情况下只有和带有href属性的元素默认可以被拖放。

45 . 容易 （2分）拖放元素时, ___事件触发时可以读取传递的数据信息。（区分大小写）

ondrop

ondrop事件为只读模式，在元素被放置时由放置区域触发，可以用于读取传递来的数据。

46 . 普通 （2分）当用户开始拖动元素时，元素的ondragstart事件会被触发。

正确

47 . 普通 （1分）在HTML5拖放API中，只有带上id属性的元素才可以被拖曳。

错误

只要该元素有draggable属性为true都可以被拖曳。

48 . 容易 （1分）假设DragEvent对象用ev表示，以下哪种写法可以用于只清除纯文本类型的数据？（ ）。

A. ev.dataTransfer.clearData()

B. ev.dataTransfer.clearData([“text/plain”])

C. ev.dataTransfer.clearData([text/plain])

D. ev.dataTransfer.clearData(“text/plain”)

ev.dataTransfer.clearData()不写参数会清除所有格式类型的数据；正确参数是“text/plain”，不需要加中括号。在语法中clearData([format])这里的中括号表示内容可选填，不是说要把中括号也照样填出来的意思。

49 . 容易 （1分）以下哪个方法可以用于设置在元素拖放时传递数据？（ ）。

A. setData(format, data)

B. getData(format)

C. clearData([format])

D. setDragImage(image, x, y)

setData()可以设置传递的数据data为format格式，通常在ondragstart事件中使用，用于传递数据。

50 . 容易 （1分）

以下哪句代码可以将段落元素

声明成可拖放元素？（ ）。

A.

B.

C.

D.

是正确写法，不可以省略等号后面的属性值。填false表示不允许拖放。

51 . 容易 （1分）当用户拖动元素时触发ondragstart事件，此时可以通过设置DragEvent中的哪个属性来传递数据？（ ）。

A. types

B. dataTransfer

C. items

D. files

dataTransfer正确，其余选项均只是dataTransfer的属性。

52 . 容易 （1分）当元素处于被拖动状态时，该元素自身会触发哪个事件？（ ）。

A. ondragstart

B. ondrag

C. ondragover

D. ondragenter

ondrag会在元素处于被拖动状态时触发，表示正在被拖拽。

53 . 容易 （1分）当用户刚开始拖动元素时，该元素会触发哪个事件？（ ）。

A. ondragstart

B. ondrag

C. ondragover

D. ondragenter

ondragstart会在用户拖动元素一瞬间的最开始被触发。

54 . 容易 （1分）关于HTML5拖放API的作用以下哪个描述是不正确的？（ ）。

A. HTML5拖放API规定了所有元素都可以被拖放。

B. HTML5拖放API可以用于直接将本地电脑上的文件拖放到网页中。

C. HTML5拖放API允许用户鼠标右键点击选中可拖放元素或文件进行移动。

D. HTML5拖放API可以用于将网页中的元素拖放到页面指定区域中。

用户可以使用鼠标左键进行拖放行为，而不是右键。