一、单选题
1
如下用于创建某一精灵对象的语句，一定不正确的是？
A、
var sp = new Sprite(name, painter);
B、
sp = new Sprite('name', painter);
C、
var sp = new Sprite(name, painter，behavior);
D、
var sp = new Sprites(name, painter，[behavior]);
我的答案：
2
关于视差动画，以下说法正确的是？
A、
所谓视差就是物体运动速度的差异
B、
可以基于视差的原理实现动画的效果
C、
可以基于视差的原理实现立体的效果
D、
远景（如远处的天空）和近景（如近处的树）的帧率fps值不同，所以速度不同
我的答案：
3
以下不是图形填充支持的内容的是？
A、
纯色
B、
阴影
C、
图案
D、
放射渐变
我的答案：
4
绘制填充文本fillText方法的第几个参数决定绘制的内容？
A、
1
B、
2
C、
3
D、
4
我的答案：
5
创建离屏canvas对象，以下哪个写法是正确的？
A、
offscreenCanvas = document.createElement('canvas')
B、
offscreenCanvas = document.create('canvas')
C、
offscreenCanvas = document.addElement('canvas')
D、
offscreenCanvas = document.createElementById('canvas')
我的答案：
6
Javascript设置id为tips的div元素的背景色为红色，以下正确的选项是哪项？
A、
document.getElementById("tips").backgroundColor="red";
B、
document.getElementById("tips").backgroundColor="#f00";
C、
document.getElementsByid("tips").backgroundColor="red";
D、
document.getElementById("tips").style.backgroundColor="#f00";
我的答案：
7
时钟案例中，实现每秒调用drawClock函数的代码是？
A、
setInterval(drawClock, 1000);
B、
setInterval(drawClock(time), 1000);
C、
setTimeout(drawClock, 1000);
D、
setTimeout(drawClock(time), 1000);
我的答案：
8
若要实现在canvas上绘制“countrypath.jpg”图片，原图大小，绘图环境对象为ctx，图像对象名称为img。以下哪项是正确的实现代码？
A、
img.src = 'countrypath.jpg';
img.onload = function(e) {
ctx.drawImage(img, 0, 0);
};
B、
img.src = 'countrypath.jpg';
img.onload = function(e) {
ctx.putImageData(img, 0, 0);
};
C、
image.src = 'countrypath.jpg';
image.onload = function(e) {
context.drawImage(image, 0, 0);
};
D、
image.src = 'countrypath.jpg';
image.onload = function(e) {
context.putImageData(image, 0, 0);
};
我的答案：
9
以下哪项色彩表示方法是canvas不支持的？
A、
context.fillStyle = #33ff44
B、
context.fillStyle = 'red'
C、
context.fillStyle = 'hsl(255,255,255)'
D、
context.fillStyle = 'rgba(30,12,255,0.5)'
我的答案：
10
请选择绘制一条起始点为（10，10），终止点为（150，150）的直线代码，其中绘图环境为context。
A、
context.moveTo(10,10);
context.lineTo(150,150);
context.stroke();
B、
context.moveTo(10,10);
context.lineTo(10,10);
context.stroke();
C、
context.moveTo(150,150);
context.lineTo(150,150);
context.stroke();
D、
context.moveTo(10,10);
context.lineTo(150,150);
我的答案：
11
以下哪项是设置阴影方向为右上，阴影颜色为“rgba(0,0,0,0.3)”，模糊度为10？
ctx为绘图环境对象。
A、
ctx.shadowColor = "rgba(0,0,0,0.3)";
ctx.shadowOffsetX = "15";
ctx.shadowOffsetY = "15";
ctx.shadowBlur = "10";
B、
ctx.shadowColor = "rgba(0,0,0,0.3)";
ctx.shadowOffsetX = "15";
ctx.shadowOffsetY = "-15";
ctx.shadowBlur = "10";
C、
ctx.shadowColor = rgba(0,0,0,0.3);
ctx.shadowOffsetX = "15";
ctx.shadowOffsetY = "15";
ctx.shadowBlur = "10";
D、
ctx.shadowColor = rgba(0,0,0,0.3);
ctx.shadowOffsetX = "15";
ctx.shadowOffsetY = "-15";
ctx.shadowBlur = "10";
我的答案：
12
当前正在执行的动画函数为animate1，若当flag为true时，利用动画函数的polyFill版来执行下一段动画animate2，请补全下方代码：
if(flag)
===【此处需填写】===
else
requestNextAnimationFrame(animate1);
A、
requestNextAnimationFrame(animate2);
B、
requestNextAnimationFrame(animate1);
C、
setTimeout(animate1);
D、
setTimeout(animate2);
我的答案：
13
canvas中二维绘图环境对象获取的语句是哪项？假设canvas为获取的canvas对象名。
A、
var ctx=canvas.getContext("2d");
B、
var canvas=document.getElementById("myCanvas");
C、
var ctx=canvas.getContext("WebGL");
D、
var ctx=canvas.getElementById("2d");
我的答案：
14
时钟案例中，实现每秒调用drawClock函数的代码是？
A、
setInterval(drawClock, 1000);
B、
setInterval(drawClock(time), 1000);
C、
setTimeout(drawClock, 1000);
D、
setTimeout(drawClock(time), 1000);
我的答案：
15
绘制字体大小为40px，字体为“Arial”，颜色为“rgba(255,255,0,0.8)”，文字内容为“Happy 2019”的描边文本，请问以下哪项代码是正确的？
A、
txt="Happy 2019";
ctx.fontSize = "40px";
ctx.fontName = "Arial";
ctx.fontColor= "rgba(255,255,0,0.8)";
ctx.fillText(txt,100,100);
B、
txt="Happy 2019";
ctx.font = "40px Arial";
ctx.fillStyle = "rgba(255,255,0,0.8)";
ctx.fillText(txt,100,100);
C、
txt="Happy 2019";
ctx.fontSize = "40px";
ctx.fontName = "Arial";
ctx.fillColor= "rgba(255,255,0,0.8)";
ctx.fillText(txt,100,100);
D、
txt="Happy 2019";
ctx.font = "40px Arial";
ctx.strokeColor= "rgba(255,255,0,0.8)";
ctx.strokeText(txt,100,100);
我的答案：
16
指定起始绘制点的方法名是什么？
A、
lineTo
B、
moveTo
C、
startPoint
D、
point
我的答案：
17
关于setInterval和requestAnimationFrame，以下哪项说法是错误的？
A、
setInterval中设置时间间隔的单位为毫秒。
B、
requestAnimationFrame方法不是所有的浏览器都支持。
C、
与requestAnimationFrame对应的，用于停止动画的方法是clearAnimationFrame。
D、
两者都可以用于实现动画。
我的答案：
18
绘制文本的函数drawText有3个参数，形参中text对象存储绘制的文本和绘制的起始点坐标，style对象存储了绘图属性的具体值，mode表示是填充还是描边绘制。
具体drawText函数的定义如下：
function drawText(text,style,mode){
ctx.save();
if(mode){
ctx.strokeStyle = style.color;
ctx.strokeText(text.text, text.x, text.y);
}
else{
ctx.fillStyle = style.color;
ctx.fillText(text.text, text.x, text.y);
}
ctx.restore();
}
程序初始段如下：
text.text="GAME OVER!";
text.x=0;
text.y=0;
style.color="rgb(0,255,0)";
drawText(text,style,0);
请问程序最后能绘制出什么图形？
A、
从canvas的原点开始，位于最左上方的位置绘制出绿色描边文字“Game Over!”
B、
从canvas的原点开始，位于最左上方的位置绘制出绿色填充文字“Game Over!”
C、
从canvas的原点开始，位于最左上方的位置绘制出蓝色填充文字“Game Over!”
D、
以上答案都不对
我的答案：
19
绘制路径后，描边绘制的方法是什么？
A、
fill
B、
stroke
C、
fillArc
D、
strokeArc
我的答案：
20
canvas中设置文本水平对齐和垂直对齐的属性是什么？
A、
textAlign、textVerticalAlign
B、
textHorizontalAlign、textVerticalAlign
C、
textAlign、textBaseline
D、
textCenter、textMiddle
我的答案：
21
HTML5中视频的标记是什么？
A、
<videos></videos>
B、
<video></video>
C、
<videos/>
D、
<video/>
我的答案：
22
设置填充样式的属性是什么？
A、
fillStyle
B、
strokeStyle
C、
style
D、
以上都不对
我的答案：
23
以下哪个选项的说法是正确的？
A、
图形和图像只是说法不同，其实是一回事。
B、
canvas的图像绘制方法是用JS语言实现的。
C、
图形和分辨率相关。
D、
图像的数字化一般要包括准备图像、采样、量化和压缩。
我的答案：
24
不能创建如下圆弧路径的代码片段是？
A、
context.arc(canvas.width / 4, canvas.height / 2, 200, 0, 45 * Math.PI / 180, false);
B、
context.arc(canvas.width / 4, canvas.height / 2, 200, 0, 45 * Math.PI / 180);
C、
context.arc(canvas.width / 4, canvas.height / 2, 200, 0, 45 * Math.PI / 180, true);
D、
context.arc(canvas.width / 4, canvas.height / 2, 200, 0, -45 * Math.PI / 180, true);
我的答案：
25
DOM模型中document对象提供的通过标签名获取对象的方法？
A、
getContext()
B、
getElementById()
C、
getElementsByTagName()
D、
getElementsByClassName()
我的答案：
26
声明一个图像对象image，并指出图像的路径为“images/flower.jpg”，图像加载完成后绘制到canvas上，请选择以下哪项是正确的？
A、
image = new Image();
image.src = 'images/flower.jpg';
image.onload = function(e) {
context.drawImage(image, 0, 0);
};
B、
image = new Image();
image.scr = 'images/flower.jpg';
image.onload = function(e) {
context.drawImage(image, 0, 0);
};
C、
image = new Image();
image.src = 'images/flower.jpg';
image.onComplete= function(e) {
context.drawImage(image, 0, 0);
};
D、
image = new Image();
image.src = 'images/flower.jpg';
image.onload = function(e) {
context.drawImage(Image, 0, 0);
};
我的答案：
27
绘制文本使其位于canvas的正中，请问以下需要补全的代码，哪项是正确的？
txt = "Happy 2019";
<---- 补全代码处 ---->
context.strokeText(txt, 0, 0);
A、
context.textAlign = 'center';
context.textBaseline = 'middle';
context.translate(canvas.width / 2, canvas.height / 2);
B、
context.translate(canvas.width / 2, canvas.height / 2);
C、
context.textAlign('center');
context.textBaseline('middle');
context.translate(canvas.width / 2, canvas.height / 2);
D、
context.textAlign = 'center';
context.textBaseline = 'middle';
context.transform(canvas.width / 2, canvas.height / 2);
我的答案：
28
实现如下阴影效果的可能的代码片段是？
A、
context.shadowColor = 'rgba(255,255,0,0.5)';
context.shadowOffsetX = 20;
context.shadowOffsetY = -10;
context.shadowBlur = 5;
context.strokeRect(50, 50, 200, 100);
B、
context.shadowColor = 'rgba(255,255,0,0.5)';
context.shadowOffsetX = -20;
context.shadowOffsetY = 10;
context.shadowBlur = 10;
context.fillRect(50, 50, 200, 100);
C、
context.shadowColor = 'rgba(200,0,100,0.8)';
context.shadowOffsetX = 20;
context.shadowOffsetY = 10;
context.shadowBlur = 10;
context.fillRect(50, 50, 200, 100);
D、
context.shadowColor = 'rgba(200,0,100,0.8)';
context.shadowOffsetX = -20;
context.shadowOffsetY = 10;
context.shadowBlur = 0;
context.fillRect(50, 50, 200, 100);
我的答案：
29
以下代码中，可以保存当前的globalAlpha属性的是？
A、
context.save();
B、
context.restore();
C、
function saveDrawingSurface() {
drawingSurfaceImageData = context.getImageData(0, 0, mycanvas.width, mycanvas.height);
}
saveDrawingSurface();
D、
function restoreDrawingSurface() {
context.putImageData(drawingSurfaceImageData, 0, 0);
}
restoreDrawingSurface();
我的答案：
30
以下对requestNextAnimationFrame函数的说法正确的是哪项？
A、
requestNextAnimationFrame函数是HTML5提供的动画函数
B、
requestNextAnimationFrame函数是动画函数的polyFill版
C、
IE低版本浏览器不支持requestNextAnimationFrame函数
D、
requestNextAnimationFrame函数使用时不需要引入任何JS文件
我的答案：
31
以下哪个选项可用来获取当前鼠标在页面的坐标，假设e为事件对象。
A、
e.x，e.y
B、
e.locX，e.locY
C、
e.mouseX，e.mouseY
D、
e.clientX，e.clientY
我的答案：
32
绘制一个黄色的、线宽为6的矩形框，以下属性设置代码正确的是？
A、
context.fillStyle = 'yellow';
context.lineWidth = 6;
B、
context.strokeStyle = rgb(255,255,0);
context.lineWidth = 3;
C、
context.strokeStyle = 'yellow';
context.lineWidth = 6;
D、
context.strokeStyle = 'yellow';
context.style.lineWidth = 3;
我的答案：
33
在JavaScript中，新建一个变量没有赋值，请问变量类型是什么？
A、
null
B、
object
C、
undefined
D、
以上都不正确
我的答案：
34
请选择阴影颜色为“rgba (0,0,0,0.8)”，阴影方向为左上，阴影模糊值为5的代码正确的是哪项？绘图环境对象名为ctx。
A、
ctx.shadowColor = "rgba(0,0,0,0.8)";
ctx.shadowOffsetX="20";
ctx.shadowOffsetY="-20";
ctx.shadowBlur="5";
B、
ctx.shadowColor = "rgba(0,0,0,0.8)";
ctx.shadowOffsetX="-20";
ctx.shadowOffsetY="-20";
ctx.shadowBlur="5";
C、
ctx.shadowColor = "rgba(0,0,0,0.8)";
ctx.shadowOffsetX="-20";
ctx.shadowOffsetY="20";
ctx.shadowBlur="5";
D、
ctx.shadowColor = "rgba(0,0,0,0.8)";
ctx.shadowOffsetX="20";
ctx.shadowOffsetY="20";
ctx.shadowBlur="5";
我的答案：
35
以下是绘制矩形的程序段，请选择正确的选项进行补全
function drawRect(ctx,rect,style,isFill){
ctx.save();
ctx.lineWidth = style.lineWidth;
ctx.rect(rect.x, rect.y, rect.width, rect.height);
if(isFill){
ctx.fillStyle = style.color;
---1---
}
else{
ctx.strokeStyle = style.color;
ctx.stroke();
}
ctx.restore();
}
A、
fill();
B、
ctx.fill();
C、
context.fill()
D、
canvas.fill();
我的答案：
二、多选题
1
以下可以用来绘制文本的方法有哪些？假设绘图环境对象为context。
A、
context.text()
B、
context.drawText()
C、
context.fillText()
D、
context.strokeText()
我的答案：
2
以下关于drawImage和putImageData方法的说法，正确的有？
A、
都可以实现某一图像的绘制。
B、
都可以实现图像某一部分的裁剪。
C、
都可以实现某一图像的缩放。
D、
都可以实现某一图像在指定位置的绘制。
E、
都受到globalAlpha的影响。
我的答案：
3
以下哪些属于JavaScript中基本变量类型？
A、
String
B、
Number
C、
Null
D、
Undefined
E、
Boolean
我的答案：
4
以下关于帧率FPS的说法，不正确的有？
A、
FPS表示动画的对象在每一帧的变化量
B、
requestAnimationFrame方法对应的FPS约60
C、
FPS由浏览器决定，不同的浏览器FPS不同，但同一机器上的FPS恒定
D、
FPS值对应动画的setInterval方法中的第二个参数值
我的答案：
5
以下哪些颜色表示方法是canvas支持的？
A、
#33ff44
B、
red
C、
rgb(255,255,255)
D、
rgba(30,12,255,0.5)
我的答案：
6
以下代码片段能实现矩形框绘制的有？
A、
context.strokeRect(50,50,50,50);
B、
context.rect(50,50,50,50);
C、
context.moveTo(50,50);
context.lineTo(100,50);
context.lineTo(100,100);
context.lineTo(50,100);
context.closePath();
context.stroke();
D、
context.moveTo(50,50);
context.lineTo(100,50);
context.lineTo(100,100);
context.lineTo(50,100);
context.lineTo(50,50);
context.stroke();
E、
context.fillRect(50,50,50,50);
我的答案：
7
关于精灵表，以下说法正确的是？
A、
精灵表的绘制本质上是利用drawImage方法实现的。
B、
精灵表是一张图片。
C、
精灵表绘制器的参数是精灵表中单元格的划分。
D、
advance方法实现下一单元格的绘制
E、
精灵表默认从第一个单元格开始绘制
我的答案：
8
如何在divTips元素对象中创建TIPS_NUM个canvas元素？
A、
var elem="";
for(i=0;i<TIPS_NUM;i++){
elem += "<canvas width='30' height='30' class='canvas_tips'></canvas>";
}
divTips.innerHTML=elem;
B、
var elem;
for(i=0;i<TIPS_NUM;i++){
elem = "<canvas width='30' height='30' class='canvas_tips'></canvas>";
}
divTips.innerHTML=elem;
C、
var elem=[];
for(i=0;i<TIPS_NUM;i++){
document.createElement("canvas");
}
divTips.appendChild(elem);
D、
var elem=[];
for(i=0;i<TIPS_NUM;i++){
elem[i]=document.createElement("canvas");
divTips.appendChild(elem[i]);
}
我的答案：
9
实现橡皮筋框选的效果，需要编写哪些事件响应？
A、
mousedown
B、
mousemove
C、
mouseup
D、
mouseclick
E、
mouseout
我的答案：
10
canvas提供的绘制文本的方法有哪些？
A、
fillText()
B、
strokeText()
C、
drawText()
D、
writeText()
我的答案：
11
以下关于requestAnimationFrame的说法不正确的有？
A、
requestAnimationFrame是Canvas API提供的动画方法
B、
执行requestAnimationFrame方法时开始动画
C、
和requestAnimationFrame(animate)配对使用的是cancelAnimationFrame(animate)
D、
requestAnimationFrame(animate)对应的帧率fps值的设定在animate中完成
我的答案：
12
事件的注册方法有以下哪些？
A、
对象.事件属性=事件处理函数名;
B、
对象.addEventListener("事件",事件处理函数名);
C、
html标签的事件属性赋值为事件处理函数名
D、
对象.事件名=事件处理函数
我的答案：
13
在canvas上拖拉一个矩形，鼠标按下拖动时可随意修改矩形的大小，鼠标放开后能在canvas上出现矩形，请问在交互操作过程中涉及到哪些事件要做处理？
A、
mousedown
B、
mousemove
C、
mouseover
D、
mouseup
我的答案：
14
如实验三中，实现橡皮筋框选某一区域，然后按回车后将选框内的图像放大到整个canvas，需要编写哪些事件响应？
A、
mousedown
B、
mousemove
C、
mouseup
D、
mouseclick
E、
keydown
我的答案：
15
mousedown事件获取的鼠标当前点坐标需要转化到canvas坐标系时，需要做以下哪些处理？
A、
去除canvas的margin-left、margin-top值
B、
去除canvas的border-left、border-top值
C、
去除canvas的padding-left、padding-top值
D、
去除canvas的box-left、box-top值
E、
按照canvas和context对象的大小比例值来调整像素点的大小值