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

最新推荐文章于 2024-06-15 19:46:07 发布

1uuue

最新推荐文章于 2024-06-15 19:46:07 发布

阅读量1k

点赞数 1

分类专栏： JavaScript 文章标签：前端 javascript java

本文链接：https://blog.csdn.net/qq_61727355/article/details/126482463

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

参考教材：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中已知有<canvas id="myTestID" class="myTestClass"></canvas>，在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中创建画布需要使用<canvas>元素。其中<canvas>标签的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提供了<canvas>标签用于在网页上创建画布区域。

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分）画布元素<canvas>自带1像素宽的黑色实线边框效果。

错误

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

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

正确

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

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

错误

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

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

正确

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

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

正确

正确，<canvas>元素支持width和height属性。例如<canvas id=”myCanvas” width=”100” height=”50”></canvas>就表示宽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. <canvas id=”myCanvas” w=”200” h=”50”></canvas>

B. <canvas id=”myCanvas” w=”200px” h=”50px”></canvas>

C. <canvas id=”myCanvas” width=”200” height=”50”></canvas>

D. <canvas id=”myCanvas” width=”200px” height=”50px”></canvas>

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分）所有元素默认情况下都是可以被拖放的。

错误

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

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可以用于将网页中的元素拖放到页面指定区域中。

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

1uuue

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录