计算机图形学期末考试复习资料2Word文档下载推荐.docx
《计算机图形学期末考试复习资料2Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《计算机图形学期末考试复习资料2Word文档下载推荐.docx（57页珍藏版）》请在冰豆网上搜索。
【简答题】
（1）计算机图形学研究的主要内容是什么？
其目标是什么？
计算机图形学是研究关于计算机图形对象的建模、处理与绘制等方面的理论和技术。
其基本目标是：
构建图形对象的虚拟世界，并按特定视角将虚拟模型的场景在图形设备上绘制出来。
（2）计算机中图形的表示方法分为哪两类？
分别是什么？
点阵表示：
简称为图像（数字图像）——枚举出图形中所有的点。
参数表示：
简称为图形——由图形的形状参数（方程或分析表达式的系数，线段的端点坐标等）+属性参数（颜色、线型等）来表示图形
（3）请分别简述图形和图像的概念：
图形是含有几何属性，更强调场景的几何表示，是由场景的几何模型和景物的物理属性共同组成的。
图像指计算机内以位图（Bitmap）形式存在的灰度信息
（4）计算机图形学的应用领域有哪些，请举不少于4例说明其应用领域。
（1）显示图片、图形、动画
（2）计算机辅助设计与制造。
（3）科学、技术及事务管理中的交互绘图。
（4）绘制勘探、测量图形。
（5）过程控制及系统环境模拟。
（6）图形用户界面（7）游戏（8）虚拟现实。
（5）什么是图像的分辨率？
解答：
在水平和垂直方向上每单位长度（如英寸）所包含的像素点的数目。
（6）一张分辨率为600*480的图片，请计算使用32位真彩色时，该图片需要占用多大磁盘空间。
（7）在二维绘图环境（2D），针对两个不规则的图形，如何检测它们是否发生碰撞，请提出你自己的方法和检测步骤，并试绘图说明。
（8）在二维绘图环境（2D），针对两个矩形，如何检测它们是否发生碰撞，请写出算法思路，并试绘图说明。
（9）在二维绘图环境（2D），针对两个圆形，如何检测它们是否发生碰撞，请写出算法思路，并试绘图说明。
程序题：
【1】补充程序代码绘制如下饼图，要求饼图的半径至少为100px，饼图的各个块比例为：
绿色（green）5%，黄色（gold）25%，深蓝色（DeepSkyBlue）60%，橙色（Orange）10%
<
!
DOCTYPEHTMLPUBLIC"
-//W3C//DTDHTML4.01Transitional//EN"
"
http:
//www.w3.org/TR/html4/loose.dtd"
>
html>
head>
<
metacharset="
uft-8"
title>
/title>
/head>
body>
canvasid='
canvas'
width="
600"
height="
560"
/canvas>
script>
varcanvas=document.getElementById（'
）;
varctx=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（）;
/*先绘制金黄色部分*/
gold"
//将笔移动到画布的中心（扇形的中心）
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）;
/*先绘制蓝色部分*/
DeepSkyBlue"
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）;
/*先绘制红色部分*/
red"
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）;
/script>
/body>
/html>
【2】补充程序代码绘制如下饼图，要求饼图的半径至少为100px，饼图的各个块比例为：
红色（red）30%，橙色（Orange）70%
//绘制红色部分
ctx.fillStyle="
ctx.moveTo（300,240）;
ctx.lineTo（200,240）;
ctx.arc（300,240,100,Math.PI,0.2*Math.PI*2,true）;
//绘制橘色部分
orange"
ctx.lineTo（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）;
【3】补充程序代码绘制如下三个圆形，实现显示RGB三元色的叠加效果。
canvasid="
canvas"
/canvas>
ctx.globalCompositeOperation="
lighter"
//设置全局合成效果
ctx.arc（300,200,120,0,Math.PI*2,false）;
ctx.closePath（）;
ctx.fill（）;
ctx.arc（300-0.5*160,200+Math.cos（Math.PI/6）*160,120,0,Math.PI*2,false）;
blue"
ctx.arc（300+0.5*160,200+Math.cos（Math.PI/6）*160,120,0,Math.PI*2,false）;
【4】如下图所示三角形ABC，将其以A点为中心，逆时针旋转90度。
varcanvas=document.getElementById（"
varctx=canvas.getContext（"
functionmain（）{
ctx.moveTo（400,300）;
ctx.lineTo（200,380）;
ctx.lineTo（170,260）;
ctx.lineTo（400,300）;
ctx.stroke（）;
ctx.closePath（）;
ctx.rotate（90*Math.PI/180）;
}
main（）;
【5】补充程序代码，实现在Canvas中绘制如下图形
varg=ctx.createRadialGradient（150,150,10,150,150,50）;
g.addColorStop（0,"
yellow"
g.addColorStop（1,"
ctx.fillStyle=g;
ctx.arc（150,150,50,0,Math.PI*2,false）;
【6】
补充程序代码，按如下要求实现在Canvas中绘制图片
（1）将文件夹pic下的图片horse1.jpg绘制在（10,10）坐标位置
utf-8"
varimg=newImage（）;
img.src="
pic/horse1.jpg"
img.onload=function（）{
ctx.drawImage（img,10,10）;
（2）将文件夹pic下的图片horse2.jpg绘制在（40,40）坐标位置，图片缩放为原来的1/4大小。
完成后效果图如下所示
varimg1=newImage（）;
varimg2=newImage（）;
img1.src="
img2.src="
pic/horse2.jpg"
img1.onload=function（）{
ctx.drawImage（img1,10,10,img1.width,img1.height）;
img2.onload=function（）{
ctx.drawImage（img2,40,40,img2.width/4,img2.height/4）;
【7】补充程序代码，按如下要求实现图片的处理和绘制：
读取pic文件夹下的street.jpg图片，获取图片的像素后，修改像素为灰度黑白后并将结果绘制在画布上。
varctx=canvas.getContext（'
2d'
pic/street.jpg"
ctx.drawImage（img,0,0）;
varimgData=ctx.getImageData（0,0,img.width,img.height）;
ctx.clearRect（0,0,600,560）;
varpixs=imgData.data;
varcd=pixs.length;
for（vari=0;
i<
cd;
i++）
{
varavg=（pixs[4*i+0]+pixs[4*i+1]+pixs[4*i+2]）/3;
pixs[4*i+0]=avg;
pixs[4*i+1]=avg;
pixs[4*i+2]=avg;
ctx.putImageData（imgData,0,0）;
【8】补充程序代码，实现在Canvas中绘制如下图形。
已知内圆的圆心坐标为（50,50），半径为25。
外圆的圆心坐标为（100,100），半径为100。
下图中渐变色效果使用的颜色有rgb（255,0,0）和rgb（0,255,0）两种。
//定义放射性渐变色
vargr=ctx.createRadialGradient（50,50,25,100,100,100）;
gr.addColorStop（0,"
rgb（255,0,0）"
gr.addColorStop（0.5,"
rgb（0,255,0）"
//定义好色彩以后，把色彩用到画笔的填充效果
ctx.fillStyle=gr;
//绘制圆形
ctx.beginPath（）;
ctx.arc（100,100,100,0,Math.PI*2,false）;
【9】补充程序代码，实现在Canvas中绘制如下边长为80的正方形。
注意有阴影效果。
ctx.shadowColor="
black"
ctx.shadowOffsetX=4;
//阴影向什么方向偏移（X轴）
ctx.shadowOffsetY=4;
//阴影向什么方向偏移（Y轴）
ctx.shadowBlur=5;
//设置模糊效果
ctx.fillRect（10,10,100,100）;
【10】补充程序代码，实现在Canvas中绘制如下边长为80的正方形。
ctx.shadowOffsetX=-4;
ctx.shadowOffsetY=-4;
【11】补充程序代码，实现在Canvas中绘制如下半径为50的圆形形。
varcanvas=document.getElemen
升级会员 