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