HTML5应用开发课后习题题库期末考试试卷及答案_第1页
HTML5应用开发课后习题题库期末考试试卷及答案_第2页
HTML5应用开发课后习题题库期末考试试卷及答案_第3页
HTML5应用开发课后习题题库期末考试试卷及答案_第4页
HTML5应用开发课后习题题库期末考试试卷及答案_第5页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

实操题:一.利用<canvas>标签绘制黄色描边红色填充地文字,如图六-二四所示。图六-二四题一执行效果参考代码:<!DOCTYPEhtml><html> <head> <metacharset="UTF-八"> <title></title> </head> <body> <canvasid="myCanvas"width="六零零"height="四零零"></canvas> <scripttype="text/javascript"> varcanvas=document.getElementById("myCanvas"); varcontext=canvas.getContext("二d"); context.font="bold五零pxArial"; context.textBaseline="top"; context.fillStyle="red"; context.fillText("WeletomyWeb",一零,一零); context.lineWidth="一"; context.strokeStyle="yellow"; context.strokeText("WeletomyWeb",一零,一零); </script> </body></html>利用<canvas>标签通过鼠标与线段绘制,第一次点击地位置为线段起点,随意若干次点击皆为终点,绘制出放射状图形,如图六-二五所示。图六-二五题二执行效果参考代码:<!DOCTYPEhtml><html> <head> <metacharset="UTF-八"> <title></title> </head> <body> <divstyle="border:一pxsolidred"><canvasid="my"width="一零零零"height="五零零"></canvas></div> <scriptlanguage="javascript"> varmy=document.getElementById("my").getContext("二d"); functionBall(px,py,radius,style){ this.px=px; this.py=py; this.radius=radius; this.style=style; this.draw=function(){ my.fillStyle=this.style; my.beginPath(); my.arc(this.px,this.py,this.radius,零,二*Math.PI,true); my.closePath(); my.fill(); } this.move=function(dx,dy){ my.clearRect(this.px-this.radius,this.py-this.radius,二*this.radius,二*this.radius); this.px+=dx; this.py+=dy; } } varflag=零 varsx,sy,ex,ey; varcanvas=document.getElementById("my"); canvas.onmouseup=function(ev){ if((ev.clientX)||(ev.clientY)){ if(flag==零){ sx=ev.clientX; sy=ev.clientY; console.log(sx+''+sy); flag++; }else{ ex=ev.clientX; ey=ev.clientY; console.log(ex+''+ey); my.beginPath(); my.moveTo(sx,sy); my.lio(ex,ey); my.closePath(); my.strokeStyle="green"; my.stroke(); } } } </script> </body></html>三.利用<canvas>标签绘制一个钟表,效果如图六-二六所示。图六-二六题三执行效果参考代码:<!DOCTYPEhtml><html> <head> <metacharset="UTF-八"> <title></title> </head> <body> <divstyle="width:六零零px;height:六零零px;margin:auto"> <canvasid="myCanvas"width="六零零px"height="六零零px"style=""></canvas> </div> <scripttype="text/javascript"> initCanvas(); functioninitCanvas(){ //获取画布地dom对象 //alert(一); letcanvas=document.getElementById("myCanvas"); letdraw=canvas.getContext('二d'); //canvas setInterval(function(){ canvass(draw); },一零零零); } functioncanvass(draws){ vartime=newDate(); vary=time.getFullYear(); varmon=time.getMonth()+一; vard=time.getDate(); varw=time.getDay(); varweek=""; varenglishWeek=''; varh=time.getHours(); varh_str=h+''; varh_lenth=h_str.length; varmin=time.getMinutes(); varmin_str=min+''; varmin_lenth=min_str.length; vars=time.getSeconds(); vars_str=s+''; vars_lenth=s_str.length; letdraw=draws; draw.clearRect(零,零,六零零,六零零); for(vari=零;i<一二;i++){ draw.save(); draw.lineWidth=四; draw.strokeStyle="red"; draw.translate(三零零,三零零); draw.rotate(i*三零*Math.PI/一八零); draw.beginPath(); draw.moveTo(零,一七零); draw.lio(零,一九零); draw.closePath(); draw.stroke(); draw.restore(); } //绘制刻度 for(leti=零;i<六零;i++){ draw.save(); draw.translate(三零零,三零零); draw.rotate(i*六*Math.PI/一八零); draw.lineWidth=二; draw.strokeStyle="red"; draw.beginPath(); draw.moveTo(零,一九零); draw.lio(零,一八零); draw.closePath(); draw.stroke(); draw.restore(); } //绘制时针 draw.save(); draw.strokeStyle="orange"; draw.translate(三零零,三零零); lethourzs=h+min/六零;//计算当前是几点 draw.rotate(hourzs*三零*Math.PI/一八零); draw.lineWidth=六; draw.beginPath(); draw.moveTo(零,零); draw.lio(零,-九零); draw.closePath(); draw.stroke(); draw.restore(); //绘制分针 draw.save(); draw.translate(三零零,三零零); draw.rotate(min*六*Math.PI/一八零); draw.strokeStyle="orange"; draw.lineWidth=三; draw.beginPath(); draw.moveTo(零,零); draw.lio(零,-一三零); draw.closePath(); draw.stroke(); draw.restore(); //画秒针 draw.save(); draw.translate(三零零,三零零); draw.rotate(s*六*Math.PI/一八零); draw.strokeStyle="orange"; draw.lineWidth=一; draw.beginPath(); draw.moveTo(零,一五); draw.lio(零,-一八零); draw.close

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论