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

《计算机图形学期末考试复习资料(二).pdf》由会员分享，可在线阅读，更多相关《计算机图形学期末考试复习资料(二).pdf（47页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、考试说明:试题类型：（1）填 空 题（9 空 18分）（2）问 答 题（3题 12分）（3）程序题（6 题 70分 其 中 1-4题每题10分，5-6题每题15分）【填空题】（1）直线的属性包括线型、线宽和颜色等none（没有边框，无论边框宽度设为多大）dotted（点线式边框）dashed（破折线式边框）solid（直线式边框）groove（槽线式边框）ridge（脊线式边框）double（双线式边框）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的图片，请计算使用32位真彩色时、该图片需要占用多大

4、磁盘空间。（7）在二维绘图环境（2D）,针对两个不规则的图形，如何检测它们是否发生碰撞，请提出你自己的方法和检测步骤，并试绘图说明。（8）在二维绘图环境（2D）,针对两个矩形，如何检测它们是否发生碰撞，请写出算法思路，并试绘图说明。（9）在二维绘图环境（2D）,针对两个圆形，如何检测它们是否发生碰撞，请写出算法思路，并试绘图说明。程序题:1 补充程序代码绘制如下饼图，要求饼图的半径至少为lOOpx,饼图的各个块比例为:绿色(green)5%,黄色(gold)25%,深蓝色(DeepSkyBlue)60%,橙色(Orange)10%var canvas=document.getElementBy

5、Id(,canvas);var ctx=can vas.getContext(n2d);/*先绘制绿色部分力ctx.fillStyle=greenM;ctx.beginPath();ctx.moveTo(300,240);将笔移动到画布的中心ctx.lineTo(400,240);从(300,240)绘制 条线至U (400,240)ctx.arc(300,240,l 00,0,0-05*Math.PI*2,false);ctx.closePath();ctx.fill();/*先绘制金黄色部分*/ctx.fillStyle=gold;ctx.beginPath();ctx.moveTo(30

6、0,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/00,0.05*Math.PI*2,0.3*Math.PI*2,false);ctx.closePath();ctx.fill();/*先绘制蓝色部分*/ctx.fillStyle=DeepSkyBlue,;ctx.beginPath();ctx.moveTo(300,240);将笔移动到画布的中心(扇形的中心)c

7、tx.lineTo(300+100*Math.cos(0.3*Math.PI*2),240+1 00*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=nred;ctx.beginPath();ctx.moveTo(300,240);将笔移动到画布的中心(扇形的中心)ctx.lineTo(300+100*Math.cos(0J*Mat

8、h.PI*2),240-1 00*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.filK);121补充程序代码绘制如下饼图，要求饼图的半径至少为100px,饼图的各个块比例为:红色(red)30%,橙色(Orange)70%var canvas=document.getElementById(,canvas,);var ctx=canvas.getContext(2d)；绘制红色部分ctx.fillS

9、tyle=,redH;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.lineTo(300+100*Math.sin(0.05*Math.PI*2),240+100*Math.cos(0.05*Math.PI*2);ctx.arc(300,240,1

10、00,0.2*Math.PI*2,Math.PI,true);ctx.closePath();ctx.fill();3 补充程序代码绘制如卜三个圆形，实现显示RG B三元色的叠加效果。var canvas=document.getElementById(,canvas,);var ctx=can vas.getContext(2d);ctx.globalCompositeOperation=lightern;设置全局合成效果ctx.fillStyle=redu;ctx.beginPath();ctx.arc(300,200,120,0,Math.PI*2,false);ctx.closePat

11、h();ctx.fill();ctx.fiHStyle=green”;ctx.beginPath();ctx.arc(300-0.5*l 60,200+Math.cos(Math.PI/6)*160,120,0,Math.PI*2,false);ctx.closePath();ctx.fill();ctx.fillStyle=nbluen;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();【4】如下图所示三角形A B

12、C,将其以A 点为中心，逆时针旋转90度。A (2,5)C(6,3)B(l,1)var canvas=document.getElementById(ncanvasH);var ctx=canvas.getContext(2du);function main()ctx.beginPath();ctx.moveTo(400,300);ctx.lineTo(200,380);ctx.lineTo(l 70,260);ctx.lineTo(400,300);ctx.stroke();ctx.closePath();ctx.rotate(90*Math.PI/l 80);)main();5 补充程序代

13、码，实现在Canvas中绘制如下图形var canvas=document.getElementById(canvas);var ctx=canvas.getContext(n2dn);var g=ctx.createRadialGradient(150,150,10,150,150,50);g.addColorStop(0,yellow);g.addColorStop(1 /green*);ctx.fillStyle=g;ctx.beginPath();ctx.arc(l 50,150,50,0,Math,PI*2,false);ctx.fill();6补充程序代码，按如下要求实现在Canv

14、as中绘制图片(1)将文件夹pic下的图片horsel.jpg绘制在(10,10)坐标位置var canvas=document.getElementById(,canvas,);var ctx=canvas.getContext(n2dn);var img=new Image();img.src=npic/horsel.jpgn;img.onload=function()ctx.drawlmage(img,10,10);(2)将文件夹pic下的图片horse2.jpg绘制在(40,40)坐标位置，图片缩放为原来的1/4大小。完成后效果图如下所示var canvas=document.getE

15、lementById(,canvas);var ctx=canvas.getContext(,2d);var imgl=new Image();var img2=new Image();img l.src=pic/horse l.jpg1;img2.src=npic/horse2.jpgn;img 1 .onload=function()ctx.drawlmage(img 1,10,10,img 1 .width,img 1 .height);)img2.onload=function()ctx.drawImage(img2,40,40,img2.width/4,img2.height/4);

16、)【7】补充程序代码，按如下要求实现图片的处理和绘制：读 取 pic文件夹下的street.jpg图片，获取图片的像素后，修改像素为灰度黑白后并将结果绘制在画布上。var canvas=document.getElementById(,canvas,);var ctx=canvas.getContext(,2d,);var img=new Image();img.src=,pic/street.jpgH;img.onload=function()ctx.drawImage(img,O,O);var imgData=ctx.getImageData(O,O,img.width,img.heigh

17、t);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+l+pixs4*i+2)/3;pixs4*i+0=avg;pixs4*i+l=avg;pixs4*i+2J=avg;)ctx.putImageData(imgData,O,O);)【8】补充程序代码，实现在Canvas中绘制如下图形。已知内圆的圆心坐标为(50,50),半径为 25。外圆的圆心坐标为(100,100),半径为100。卜图中渐变色效果使用的颜色有r

18、gb(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(255,0,0)H);gr.addColorStop(0.5,Mrgb(0,255,0)n);gr.addColorStop(0/rgb(255,0,0)u);定义好色彩以后，把色彩用到画笔的填充效果ctx.fillStyl

19、e=gr;绘制圆形ctx.beginPath();ctx.arc(l 00,100,100,0,Math.PI*2,false);ctx.closePath();ctx.fill();9 补充程序代码，实现在Canvas中绘制如下边长为80的正方形。注意有阴影效果。var canvas=document.getElementById(,canvas,);var ctx=canvas.getContext(n2d);ctx.fillStyle=nred;ctx.shadowColor=MblackM;ctx.shadowOffsetX=4;阴影向什么方向偏移(X 轴)ctx.shadowOffs

20、etY=4;阴影向什么方向偏移(Y 轴)ctx.shadowBlur=5;设置模糊效果ctx.fillRect(10,10,100,100);1 0 补充程序代码，实现在Canvas中绘制如下边长为80的正方形。注意有阴影效果。var canvas=document.getElementById(,canvas,);var ctx=canvas.getContext(M2dn);ctx.fillStyle=,redH;ctx.shadowColor=nblackH;ctx.shadowOffsetX=-4;阴影向什么方向偏移(X 轴)ctx.shadowOffsetY=-4;阴影向什么方向偏移

21、(Y 轴)ctx.shadowBlur=5;设置模糊效果ctx.fillRect(10,10,100,100);1 1 补充程序代码，实现在Canvas中绘制如卜半径为50的圆形形。注意有阴影效果。var canvas=document.getElementById(canvas);var ctx=canvas.getContext(n2dn);ctx.fillStyle=red;ctx.shadowColor=rgb(120,120,120)”;ctx.shadowOffsetX=8;阴影向什么方向偏移(X 轴)ctx.shadowOffsetY=8;阴影向什么方向偏移(Y 轴)ctx.sh

22、adowBlur=5;设置模糊效果ctx.beginPath();ctx.arc(300,240,100,0,Math.PI*2,false);ctx.closePath;ctx.fill();1 2 补充程序，按如下要求实现使用渐变色完成如下图形：(1)使用四种颜色创建渐变色magenta,blue,green,yellow,redo各种颜色按五等分。渐变色圆心位置为(300,300),半径为300。(2)使用渐变色填充(0,0)(400,400)的矩形。矩形的边框为蓝色blue,宽度为5。var canvas=document.getElementById(,canvasn);var ct

23、x=canvas.getContext(2d);var gr=ctx.createRadialGradient(50,50,25,l00,100,100);gr.addColorStop(0,rgb(255,0,0)u);gr.addColorStop(0.5,rgb(0,255,0);gr.addColorStop(1 /,rgb(255,0,0);ctx.fillStyle=gr;ctx.fillRect(l,1,100,100);【13】补充程序代码，绘制如下所示笑脸var canvas=document.getElementById(,canvas,);var ctx=canvas.g

24、etContext(n2dH);ctx.beginPath();ctx.arc(75,75,50,0,Math.PI*2,true);/Outer circlectx.moveTo(l 10,75);ctx.arc(75,75,35,0,Math.PI,false);/Mouth(clockwise)ctx.moveTo(65,65);ctx.arc(60,65,5,0,Math.PI*2,true);/Left eyectx.moveTo(95,65);ctx.arc(90,65,5,0,Math.PI*2,true);/Right eyectx.stroke();14var canvas=

25、document.getElementById(Hcanvas);var ctx=canvas.getContext(2dH);ctx.fillStyle=nrgba(0,255,0,03)n;ctx.font=nbold 20pt 宋体”；ctX.fillTextC学 J00100);ctx.fillStyle=Mrgba(0,255,0,0.4)n;ctx.font=nbold 30pt 宋体”；或乂 1 仃 乂 1(“文”,120,100);ctx.fillStyle=rgba(0,255,0,0.5)H;ctx.font=bold 40pt 宋体”；f1仃 乂 1(“感”,150,10

26、0);ctx.fillStyle=nrgba(0,255,0,0.6)n;ctx.font=bold 50pt 宋体”；ctx.fmText(“体”,190,100);ctx.fillStyle=,rgba(0,255,0,0.7);ctx.font=bold 65pt 宋体”；ctx.fillText(ni,240,100);ctx.fillStyle=nrgba(0,255,0,0.6);ctx.font=nbold 50pt 宋体”；或乂 1 仃 乂 1(“体”,300,100);ctx.fillStyle=nrgba(0,255,0,0.5);ctx.font=bold 40pt 宋体

27、”;ctx.fmTextC”,360,100);ctx.fillStyle=nrgba(0,255,0A4)n;ctx.font=nbold 30pt 宋体”；ctx.fillTextC文”,400,100);ctx.fillStyle二 rgba(0,255,0,0.3)”;ctx.font=bold 20pt 宋体”；ctxfllText(字”,430,100);ctx.fill();【15】补充程序代码，按照如下要求，完成图形绘制var canvas=document.getElementById(,canvas,);var ctx=canvas.getContext(“2d)；var

28、lg=ctx.createLinearGradient(10,10,500,200);lg.addColorStop(0；,rgb(200,230,250)M);lg.addColorStop(1 ,rgb(0,153,255);ctx.fillStyle=lg;ctx.fillRect(50,10,350,160);ctx.fill();ctx.fillStyle=rgb(255,255,0);ctx.font=40pt Arial,;ctx.fillText(hello world!MOO,100);【16】补充程序代码，完成图形的处理和绘制，要求读取考生文件夹下的图片，使用如下算法过滤图

29、片成黑白效果图并绘制在Canvas k：计算原图每一个像素颜色值的平均值即avg=(R+G+B)+3,如果 Avg=100,贝使用 RGB(255,255,255)取代原像素颜色；如果 AVG100,则使用RGB(OQO)取代原像素颜色。var canvas=document.getElementById(ncanvasM);var ctx=canvas.getContext(n2du);var img=new Image();img.src=pic/girl.png;img.onload=function()ctx.drawlmage(img,10,10);var imgData=ctx.g

30、etImageData(O,O,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;pli*4=color;pi*4+ll=color;pli*4+2J=color;)else(color=0pi*4=color;pi*4+l=color;pi*4+2=color;)ctx.putImageData(imgData,10,10););【17】补充程序代码，完成图形的处理和绘制，要求读取考生文件夹下的图片，使用如下算法过滤图

31、片，实现底片效果，并绘制结果图在Canvas上：将当前像素点的R G B值分别与255之差后的值作为当前像素点的新的R G B值。即像素点的新的颜色值为R=255-R,G=255-G；B=255-B；var canvas=document.getElementById(ncanvas);var ctx=canvas.getContext(2d);var img=new Image();img.src=pic/girl.pngM;img.onload=function()ctx.drawImage(img,10,10);var imgData=ctx.getImageData(O,O,img.w

32、idth,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+l=255-pi*4+l;pi*4+2=255-pi*4+1 J;ctx.putImageData(imgData,10,10);【18】补充程序代码，完成图形的处理和绘制，要求读取考生文件夹下的图片，使用如下算法过滤图片，实现灰度效果，并绘制结果图在Canvas匕 读取原图片的像素点的颜色，使用如下公式计算新的颜色值R=G=B=0.3*R+0.6*

33、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=new Image();img.src=Hpic/girl.pngH;img.onload=function()ctx.drawlmage(img,10,10);var imgData=ctx.getImageData(O,O,img.width,img.height);ctx.clearRect(0,0,600,560);var p=imgData.data

34、;var numP=p.length;for(var i=0;inumP/4;i+)pi*4=0.33*pi*4;pi*4+l=0.33*pi*4+l;pi*4+2=0.34*pi*4+1 ;)ctx.putImageData(imgData,10,10);)；【19】补充程序代码，实现如下要求：己知Canvas上有两个小球和轨道，补充程序使得蓝色小球沿着轨道逆时针做圆周运动。var canvas=document.getElementById(”canvas);ctx=canvas.getContext(M2dM);function ball(x,y,r,color)this.x=x;thi

35、s.y=y;this.r=r;this.color=color;)var angle=0;var balll=new ball(0,0,20/,yellown);var bal12=new ball(200,0,16,blue);ctx.translate(300,240);function animate()ctx.clearRect(-300,-240,600,480);绘制黄色小球ctx.beginPath();ctx.fillStyle=ball 1 .color;ctx.arc(ball 1 .x,ball 1 .y,ball 1 .r,0,2*Math.PI,false);ctx.

36、closePath();ctx.fill();绘制轨道(白色线条)ctx.beginPath();ctx.strokeStyle=H white;ctx.lineWidth=2;ctx.arc(0,0,200,0,2*Math.PI,false);ctx.closePath();ctx.stroke();绘制蓝色小球ctx.beginPath();ctx.fillStyle=ball2.color;ctx.arc(ball2.x,ball2.y,ball2.r,0,2*Math.PI,false);ctx.closePath();ctx.filK);/ball2.x=200*Math.cos(

37、angle*Math.PI/180);ball2.y=200*Math.sin(angle*Math.PI/180);angle+=2;setTimeout(animate()33);)animate();2 0 补充程序代码，使用随机函数在屏幕上绘制10个圆。要求小球位置、颜色和半径也使用随机数生成。var canvas=documenl.getElementById(”canvas);ctx=canvas.getContext(2dn);function ball(x,y,d,color)this.x=x;this.y=y;this.d=d;this.color=color;this.dr

38、aw=function(ctx)ctx.fillStyle=this.color;ctx.beginPath();ctx.arc(this.x,this.y,this.d,0,Math.PI*2,false);ctx.closePath();ctx.fill()var t,i,x,y,d,color,R,G,B,balls;balls=new Array();/ball是一个变量，为他赋值一个数组，balls是用来保存所有小球的,for(i=l;i=10;i+)x=Math.floor(Math.random()*(600-400)+20);y=Math.floor(Math.random()

39、*(480-40)+20);R=Math.floor(Math.random()*255);G=Math.floor(Math.random()*255);B=Math.floor(Math.random()*255);color士rgb(+R+”,“+G+，”+B+”)”；d=Math.floor(Math.random()*20+5);t=new ball(x,y,d,color);balls.push(t);t.draw(ctx);)【21】补充程序代码，完成按如下要求完成碰撞效果：已知Canvas上有10个运动的圆，要求添加程序代码，使得圆碰到矩形边框后实现反弹。var canvas=

40、document.getElementById(”canvas);ctx=canvas.getContext(n2dn);function ball(x,y,d,vx,vy,color)this.x=x;this.y=y;this.d=d;this.vx=vx;this.vy=vy;this.color=color;this.draw=function(ctx)ctx.fillStyle=this.color;ctx.beginPath();ctx.arc(this.x,this.y,this.d,0,Math.PI*2,false);ctx.closePath();ctx.fill();)v

41、ar t,i,x,y,d,vx,vy,color,R,G,B,balls;balls=new Array();for(i=l;i 1：6+(-3)；R=Math.floor(Math.random()*255);G=Math.floor(Math.random()*255);B=Math.floor(Malh.random()*255);color=”rgb(+R+”;RG+”J+B+”)”;d=Math.floor(Math.random。*20+5);t=new ball(x,y,d,vx,vy,color);balls.push;/利用参数作出小球，然后放入balls数组中t.draw(

42、ctx);)function animate()(ctx.clearRect(0,0,600,480);ctx.strokeStyle=,blackn;ctx.lineWidth=3;ctx.strokeRect(0,0,600,480);for(var i=0;i10;i+)依次修改小球的坐标位置var t=ballsi;判断有没有超过左右边界if(t.x-t.d=600)t.vx=-t.vx;判断有没有超过上下边界if(t.y-t.d=480)t.vy=-t.vy;t.x=t.x+t.vx;t.y=t.y+t.vy;t.draw(clx);修改小球的新位置后，绘制小球)setTimeout

43、(nanimate()n,33);animate();【22】补充程序代码，完成按如下要求完成阻力效果：已知Canvas卜.有10个运动的圆，要求添加程序代码，使得圆的运动速度逐渐减慢直至停止，阻力系数使用0.95。var canvas=document.getElementById(ncanvas);ctx=canvas.getContext(n2dn);function ball(x,y,d,vx,vy,color)this.x=x;this.y=y;this.d=d;this.vx=vx;this.vy=vy;this.color=color;this.draw=function(ctx

44、)ctx.fillStyle=this.color;ctx.beginPath();ctx.arc(this.x,this.y,this.d,0,Math.PI*2,false);ctx.closePathQ;ctx.fillQ;var t,i,x,y,d,vx,vy,color,R,G,B,balls;balls=new Array();for(i=l;i=10;i+)(x=Math.floor(Math.random():1:(600-40)+20);y=Math.floor(Math.random()*(480-40)+20);vx=Math.floor(Math.random()*6+

45、(-3);/实现速度在一3,1,2vy=Math.floor(Math.random()*6+(-3);R=Math.floor(Math.random()*255);G=Math.floor(Math.random()*255);B=Math.floor(Math.random()*255);color-rgb(+R+”J+G+”J+B+”)”;d=Math.floor(M ath.random()*20+5);t=new ball(x,y,d,vx,vy,color);balls.push(t);利用参数作出小球，然后放入balls数组中t.draw(ctx);function anima

46、te()(ctx.clearRect(0,0,600,480);ctx.strokeStyle=nblackn;ctx.lineWidth=3;ctx.strokeRect(0,0,600,480);for(var i=0;i10;i+)依次修改小球的坐标位置var t=ballsi;判断有没有超过左右边界if(t.x-t.d=600)t.vx=-t.vx;判断有没有超过上下边界if(t.y-t.d=480)t.vy=-t.vy;t.x=t.x+t.vx;t.y=t.y+t.vy;t.vx=0.95*t.vx;t.vy=0.95*t.vy;t.draw(clx);修改小球的新位置后，绘制小球)

47、setTimeout(,animate(),33);)animate();23补充程序代码，按如下要求完成动画效果：读取考生文件夹下的图片，将图片绘制在Canvas ,并使得该风车转动起来，速度为30度/100毫秒。（注意：要求以风车为中心点转动）var canvas=document.getElementById(,canvas,);var ctx=canvas.getContextC2d);var img=new Image();img.ST C=风车.jpg”;ctx.translate(300,250);img.onload=function()ctx.drawlmage(img,10

48、0,100);)function animate()ctx.clearRect(0,0,600,500);ctx.rotate(l 0*Math.PI/180);ctx.drawImage(img,-200,-150);)setlntervalfanimateO,100);2 4 补充程序代码，在 Canvas上绘制如下图形和文字。New v，S e e oad v a r c a n v a s=d o c u m e n t.ge t E l e m e n t B y l d(c a n v a s );v a r c t x =c a n v a s.ge t C o n t e x

49、t (z，2 dz，);绘制第一个c t x.s t r o k e S t y l e=，r e d，z;c t x.l i n e W i d t h=1 0;c t x.a r c (2 0 0,2 4 0,1 0 0,3/2*M a t h.P I,1 0 5*M a t h.P I/1 8 0,f a l s e);c t x.s t r o k e ();c t x.f i l l S t y l e二 r gb(1 9 0,1 9 0,1 9 0)；c t x.f o n t=z/4 0 pt A r i a l”;c t x.f i l l T e x t(z/5 5%z z,

50、1 5 0,2 6 0);c t x.f o n t=2 0 P t A r i a l”;c t x.f i l l T e x t(N e w V i s i t o r s”,1 5 0,4 0 0);绘制第二个c t x.s t r o k e S t y l e=，r e dz，;c t x.l i n e W i d t h=1 0;c t x.m o v e T o (5 0 0,1 4 0);c t x.a r c (5 0 0,2 4 0,1 0 0,3/2*M a t h.P I,7 5*M a t h.P I/1 8 0,f a l s e);c t x.s t r o