计算机图形学期末考试复习资料(2)

1、考试说明：试题类型： （1）填空题（9空 18分）（2）问答题（3题12分）（3）程序题( 6题 70分 其中1-4题每题10分，5-6题每题15分）【填空题】（1）直线的属性包括线型、线宽和颜色等 none (没有边框，无论边框宽度设为多大) dotted (点线式边框) dashed (破折线式边框) solid (直线式边框) double (双线式边框) groove (槽线式边框) ridge(脊线式边框) inset (内嵌效果的边框)（2）计算机所使用的rgba颜色指的是：红(red)、绿(green)、蓝(blue)和透明度(alpha)。（3）如下图所示，界面上已有黑色矩形，

2、需要按照如图所示效果在界面上绘制四个红色矩形，则左上角的矩形使用的参数是（ ），左下角矩形使用的参数是（ ）（4）请实现绘制如下图形（6）请实现绘制如下图形【简答题】（1） 计算机图形学研究的主要内容是什么？其目标是什么？计算机图形学是研究关于计算机图形对象的建模、处理与绘制等方面的理论和技术。其基本目标是：构建图形对象的虚拟世界，并按特定视角将虚拟模型的场景在图形设备上绘制出来。（2） 计算机中图形的表示方法分为哪两类？分别是什么？点阵表示：简称为图像（数字图像）枚举出图形中所有的点。参数表示：简称为图形由图形的形状参数(方程或分析表达式的系数，线段的端点坐标等)+属性参数(颜色、线型等)来

3、表示图形（3）请分别简述图形和图像的概念：图形是含有几何属性，更强调场景的几何表示，是由场景的几何模型和景物的物理属性共同组成的。图像指计算机内以位图(bitmap)形式存在的灰度信息（4）计算机图形学的应用领域有哪些，请举不少于4例说明其应用领域。(1) 显示图片、图形、动画(2)计算机辅助设计与制造。 (3)科学、技术及事务管理中的交互绘图。 (4)绘制勘探、测量图形。(5)过程控制及系统环境模拟。(6)图形用户界面(7)游戏 (8)虚拟现实。（5） 什么是图像的分辨率？ 解答：在水平和垂直方向上每单位长度（如英寸）所包含的像素点的数目。（6） 一张分辨率为600*480的图片，请计算使用

4、32位真彩色时，该图片需要占用多大磁盘空间。（7） 在二维绘图环境(2d)，针对两个不规则的图形，如何检测它们是否发生碰撞，请提出你自己的方法和检测步骤，并试绘图说明。（8） 在二维绘图环境（2d），针对两个矩形，如何检测它们是否发生碰撞，请写出算法思路，并试绘图说明。（9）在二维绘图环境（2d），针对两个圆形，如何检测它们是否发生碰撞，请写出算法思路，并试绘图说明。程序题：【1】 补充程序代码绘制如下饼图，要求饼图的半径至少为100px，饼图的各个块比例为：绿色(green)5%，黄色(gold)25%，深蓝色(deepskyblue )60%，橙色(orange) 10% var canv

5、as=document.getelementbyid(canvas); var ctx =canvas.getcontext(2d); /*先绘制绿色部分*/ ctx.fillstyle=green; ctx.beginpath(); ctx.moveto (300,240); /将笔移动到画布的中心 ctx.lineto (400,240); /从（300，240）绘制一条线到（400，240） ctx.arc(300,240,100,0,0.05*math.pi*2,false); ctx.closepath(); ctx.fill(); /*先绘制金黄色部分*/ ctx.fillstyl

6、e=gold; ctx.beginpath(); ctx.moveto (300,240); /将笔移动到画布的中心(扇形的中心) ctx.lineto (300+100*math.cos(0.05*math.pi*2),240+100*math.sin(0.05*math.pi*2); /从（300，240）绘制一条线到黄色扇形开始的位置 ctx.arc(300,240,100,0.05*math.pi*2,0.3*math.pi*2,false); ctx.closepath(); ctx.fill(); /*先绘制蓝色部分*/ ctx.fillstyle=deepskyblue; ctx

7、.beginpath(); ctx.moveto (300,240); /将笔移动到画布的中心(扇形的中心) ctx.lineto (300+100*math.cos(0.3*math.pi*2),240+100*math.sin(0.3*math.pi*2); /从（300，240）绘制一条线到蓝色扇形开始的位置 ctx.arc(300,240,100,0.3*math.pi*2,0.9*math.pi*2,false); ctx.closepath(); ctx.fill(); /*先绘制红色部分*/ ctx.fillstyle=red; ctx.beginpath(); ctx.move

8、to (300,240); /将笔移动到画布的中心(扇形的中心) ctx.lineto (300+100*math.cos(0.1*math.pi*2),240-100*math.sin(0.1*math.pi*2); /从（300，240）绘制一条线到红色扇形开始的位置 ctx.arc(300,240,100,0.9*math.pi*2,math.pi*2,false); ctx.closepath(); ctx.fill();【2】补充程序代码绘制如下饼图，要求饼图的半径至少为100px，饼图的各个块比例为：红色(red)30%，橙色(orange) 70% var canvas=docu

9、ment.getelementbyid(canvas); var ctx =canvas.getcontext(2d); /绘制红色部分 ctx.fillstyle =red; ctx.beginpath(); ctx.moveto(300,240); ctx.lineto(200,240); ctx.arc(300,240,100,math.pi,0.2*math.pi*2,true); ctx.closepath(); ctx.fill(); /绘制橘色部分 ctx.fillstyle =orange; ctx.beginpath(); ctx.moveto(300,240); ctx.l

10、ineto(300+100*math.sin(0.05*math.pi*2),240+100*math.cos(0.05*math.pi*2); ctx.arc(300,240,100,0.2*math.pi*2,math.pi,true); ctx.closepath(); ctx.fill();【3】补充程序代码绘制如下三个圆形，实现显示 rgb 三元色的叠加效果。 var canvas=document.getelementbyid(canvas); var ctx =canvas.getcontext(2d); ctx.globalcompositeoperation =lighter

11、; /设置全局合成效果 ctx.fillstyle=red; ctx.beginpath(); ctx.arc(300,200,120,0,math.pi*2,false); ctx.closepath (); ctx.fill (); ctx.fillstyle=green; ctx.beginpath(); ctx.arc(300-0.5*160,200+math.cos(math.pi/6)*160,120,0,math.pi*2,false); ctx.closepath (); ctx.fill (); ctx.fillstyle=blue; ctx.beginpath(); ctx

12、.arc(300+0.5*160,200+math.cos(math.pi/6)*160,120,0,math.pi*2,false); ctx.closepath (); ctx.fill ();【4】如下图所示三角形abc，将其以a点为中心，逆时针旋转90度。 var canvas=document.getelementbyid(canvas); var ctx=canvas.getcontext(2d); function main() ctx.beginpath(); ctx.moveto(400,300); ctx.lineto(200,380); ctx.lineto(170,26

13、0); ctx.lineto(400,300); ctx.stroke();ctx.closepath();ctx.rotate(90*math.pi/180); main();【5】补充程序代码，实现在canvas中绘制如下图形 var canvas=document.getelementbyid(canvas); var ctx =canvas.getcontext(2d); var g=ctx.createradialgradient(150,150,10,150,150,50); g.addcolorstop(0,yellow); g.addcolorstop(1,green); ct

14、x.fillstyle=g; ctx.beginpath(); ctx.arc(150,150,50,0,math.pi*2,false); ctx.fill();【6】补充程序代码，按如下要求实现在canvas中绘制图片（1） 将文件夹pic下的图片horse1.jpg绘制在(10,10)坐标位置 var canvas=document.getelementbyid(canvas); var ctx =canvas.getcontext(2d); var img=new image(); img.src=pic/horse1.jpg; img.onload=function() ctx.dr

15、awimage(img,10,10); （2） 将文件夹pic下的图片horse2.jpg绘制在(40,40)坐标位置，图片缩放为原来的1/4大小。完成后效果图如下所示 var canvas=document.getelementbyid(canvas); var ctx =canvas.getcontext(2d); var img1=new image(); var img2=new image(); img1.src=pic/horse1.jpg; img2.src=pic/horse2.jpg; img1.onload=function() ctx.drawimage(img1,10,

16、10,img1.width,img1.height); img2.onload=function() ctx.drawimage(img2,40,40,img2.width/4,img2.height/4); 【7】补充程序代码，按如下要求实现图片的处理和绘制：读取pic文件夹下的street.jpg图片，获取图片的像素后，修改像素为灰度黑白后并将结果绘制在画布上。 var canvas=document.getelementbyid(canvas); var ctx=canvas.getcontext(2d); var img=new image(); img.src=pic/street.

17、jpg; img.onload=function() ctx.drawimage(img,0,0); var imgdata=ctx.getimagedata(0,0,img.width,img.height); ctx.clearrect(0,0,600,560); var pixs=imgdata.data; var cd=pixs.length; for(var i=0;icd;i+) var avg=(pixs4*i+0+pixs4*i+1+pixs4*i+2)/3; pixs4*i+0=avg; pixs4*i+1=avg; pixs4*i+2=avg; ctx.putimageda

18、ta(imgdata,0,0); 【8】补充程序代码，实现在canvas中绘制如下图形。已知内圆的圆心坐标为(50,50)，半径为25。外圆的圆心坐标为(100,100)，半径为100。下图中渐变色效果使用的颜色有rgb(255,0,0)和rgb(0,255,0)两种。 var canvas=document.getelementbyid(canvas); var ctx =canvas.getcontext(2d); /定义放射性渐变色 var gr=ctx.createradialgradient (50,50,25,100,100,100); gr.addcolorstop(0,rgb(

19、255,0,0); gr.addcolorstop(0.5,rgb(0,255,0); gr.addcolorstop(0,rgb(255,0,0); /定义好色彩以后，把色彩用到画笔的填充效果 ctx.fillstyle =gr; /绘制圆形 ctx.beginpath (); ctx.arc(100,100,100,0,math.pi*2,false); ctx.closepath (); ctx.fill ();【9】补充程序代码，实现在canvas中绘制如下边长为80的正方形。注意有阴影效果。 var canvas=document.getelementbyid(canvas); va

20、r ctx =canvas.getcontext(2d); ctx.fillstyle=red; ctx.shadowcolor =black; ctx.shadowoffsetx =4; /阴影向什么方向偏移（x轴） ctx.shadowoffsety =4; /阴影向什么方向偏移（y轴） ctx.shadowblur =5; /设置模糊效果 ctx.fillrect(10,10,100,100);【10】补充程序代码，实现在canvas中绘制如下边长为80的正方形。注意有阴影效果。 var canvas=document.getelementbyid(canvas); var ctx =c

21、anvas.getcontext(2d); ctx.fillstyle=red; ctx.shadowcolor =black; ctx.shadowoffsetx =-4; /阴影向什么方向偏移（x轴） ctx.shadowoffsety =-4; /阴影向什么方向偏移（y轴） ctx.shadowblur =5; /设置模糊效果 ctx.fillrect(10,10,100,100);【11】补充程序代码，实现在canvas中绘制如下半径为50的圆形形。注意有阴影效果。 var canvas=document.getelementbyid(canvas); var ctx =canvas.

22、getcontext(2d); ctx.fillstyle=red; ctx.shadowcolor =rgb(120,120,120); ctx.shadowoffsetx =8; /阴影向什么方向偏移（x轴） ctx.shadowoffsety =8; /阴影向什么方向偏移（y轴） ctx.shadowblur =5; /设置模糊效果 ctx.beginpath (); ctx.arc(300,240,100,0,math.pi*2,false); ctx.closepath; ctx.fill ();【12】补充程序，按如下要求实现使用渐变色完成如下图形：（1） 使用四种颜色创建渐变色

23、magenta，blue，green，yellow， red。各种颜色按五等分。渐变色圆心位置为(300,300)，半径为300。（2） 使用渐变色填充（0,0）（400，400）的矩形。矩形的边框为蓝色blue，宽度为5。 var canvas=document.getelementbyid(canvas); var ctx=canvas.getcontext(2d); var gr=ctx.createradialgradient(50,50,25,100,100,100); gr.addcolorstop(0,rgb(255,0,0); gr.addcolorstop(0.5,rgb(0

24、,255,0); gr.addcolorstop(1,rgb(255,0,0); ctx.fillstyle=gr; ctx.fillrect(1,1,100,100);【13】补充程序代码，绘制如下所示笑脸 var canvas=document.getelementbyid(canvas); var ctx =canvas.getcontext(2d); ctx.beginpath(); ctx.arc(75,75,50,0,math.pi*2,true); /outer circle ctx.moveto(110,75); ctx.arc(75,75,35,0,math.pi,false

25、); /mouth(clockwise) ctx.moveto(65,65); ctx.arc(60,65,5,0,math.pi*2,true); /left eye ctx.moveto(95,65); ctx.arc(90,65,5,0,math.pi*2,true); /right eye ctx.stroke(); 【14】var canvas=document.getelementbyid(canvas);var ctx=canvas.getcontext(2d);ctx.fillstyle=rgba(0,255,0,0.3);ctx.font=bold 20pt 宋体;ctx.f

26、illtext(字,100,100);ctx.fillstyle=rgba(0,255,0,0.4);ctx.font=bold 30pt 宋体;ctx.filltext(文,120,100);ctx.fillstyle=rgba(0,255,0,0.5);ctx.font=bold 40pt 宋体;ctx.filltext(感,150,100);ctx.fillstyle=rgba(0,255,0,0.6);ctx.font=bold 50pt 宋体;ctx.filltext(体,190,100);ctx.fillstyle=rgba(0,255,0,0.7);ctx.font=bold 6

27、5pt 宋体;ctx.filltext(立,240,100);ctx.fillstyle=rgba(0,255,0,0.6);ctx.font=bold 50pt 宋体;ctx.filltext(体,300,100);ctx.fillstyle=rgba(0,255,0,0.5);ctx.font=bold 40pt 宋体;ctx.filltext(感,360,100);ctx.fillstyle=rgba(0,255,0,0.4);ctx.font=bold 30pt 宋体;ctx.filltext(文,400,100);ctx.fillstyle=rgba(0,255,0,0.3);ctx

28、.font=bold 20pt 宋体;ctx.filltext(字,430,100);ctx.fill();【15】补充程序代码，按照如下要求，完成图形绘制 var canvas=document.getelementbyid(canvas); var ctx =canvas.getcontext(2d); var lg=ctx.createlineargradient(10,10,500,200); lg.addcolorstop(0,rgb(200,230,250); lg.addcolorstop(1,rgb(0,153,255); ctx.fillstyle=lg; ctx.fillr

29、ect(50,10,350,160); ctx.fill(); ctx.fillstyle=rgb(255,255,0); ctx.font=40pt arial; ctx.filltext(hello world!,100,100);【16】补充程序代码，完成图形的处理和绘制，要求读取考生文件夹下的图片，使用如下算法过滤图片成黑白效果图并绘制在canvas上：计算原图每一个像素颜色值的平均值即avg=(r+g+b)+3，如果avg=100，则使用rgb(255,255,255)取代原像素颜色；如果avg100，则使用rgb(0,0,0)取代原像素颜色。 var canvas=document

30、.getelementbyid(canvas); var ctx=canvas.getcontext(2d); var img=new image(); img.src=pic/girl.png; img.onload=function() ctx.drawimage(img,10,10); var imgdata=ctx.getimagedata(0,0,img.width,img.height); ctx.clearrect(0,0,600,560); var p=imgdata.data; var nump=p.length; for(var i=0;i100) color=255; p

31、i*4=color; pi*4+1=color; pi*4+2=color; else color=0 pi*4=color; pi*4+1=color; pi*4+2=color; ctx.putimagedata(imgdata,10,10); ;【17】补充程序代码，完成图形的处理和绘制，要求读取考生文件夹下的图片，使用如下算法过滤图片，实现底片效果，并绘制结果图在canvas上：将当前像素点的rgb值分别与255之差后的值作为当前像素点的新的rgb值。即像素点的新的颜色值为r=255-r，g=255-g；b=255-b； var canvas=document.getelementby

32、id(canvas); var ctx=canvas.getcontext(2d); var img=new image(); img.src=pic/girl.png; img.onload=function() ctx.drawimage(img,10,10); var imgdata=ctx.getimagedata(0,0,img.width,img.height); ctx.clearrect(0,0,600,560); var p=imgdata.data; var nump=p.length; for(var i=0;inump/4;i+) pi*4=255-pi*4; pi*4

33、+1=255-pi*4+1; pi*4+2=255-pi*4+1; ctx.putimagedata(imgdata,10,10); ;【18】补充程序代码，完成图形的处理和绘制，要求读取考生文件夹下的图片，使用如下算法过滤图片，实现灰度效果，并绘制结果图在canvas上：读取原图片的像素点的颜色，使用如下公式计算新的颜色值 r=g=b=0.3*r+0.6*g+0.1*b;或者r=g=b=0.33*r+0.33*g+0.34*b; var canvas=document.getelementbyid(canvas); var ctx=canvas.getcontext(2d); var img

34、=new image(); img.src=pic/girl.png; img.onload=function() ctx.drawimage(img,10,10); var imgdata=ctx.getimagedata(0,0,img.width,img.height); ctx.clearrect(0,0,600,560); var p=imgdata.data; var nump=p.length; for(var i=0;inump/4;i+) pi*4=0.33*pi*4; pi*4+1=0.33*pi*4+1; pi*4+2=0.34*pi*4+1; ctx.putimagedata(imgdata,10,10); ;【19】补充程序代码，实现如下要求：已知canvas上有两个小球和轨道，补充程序使得蓝色小球沿着轨道逆时针做圆周运动。 var canvas=document.getelementby