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

下载本文档

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

文档简介

实操题：

1.利用＜canvas＞标签绘制黄色描边红色填充地文字，如图6-24所示。

WelcometomyWeb

图6-24习题1执行效果

参考代码：

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<titlex/title>

</head>

<body>

<canvasid="myCanvas"width=n600"height="400"></canvas>

<scripttype="text/javascript">

varcanvas=document.getElementByld("myCanvas");

varcontext=canvas.getContext("2d");

context.font="bold50pxArial";

context.textBaseline="top";

context.fillstyle="red";

context.fillText("WeletomyWeb",10,10);

context.linewidth="1";

context.strokestyle="yellow";

context.strokeText("WeletomyWeb"10,10);

</script>

</body>

</html>

2.利用<canvas>标签通过鼠标事件与线段绘制，第一次点击地位置为线段起点，随意若干次

点击皆为终点，绘制出放射状图形，如图6-25所示。

图6-25习题2执行效果

参考代码：

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF"8">

<titlex/title>

</head>

<body>

<divstyle="border:lpxsolidred"xcanvasid=,,my"width=n1000"

height=',500"></canvasx/div>

<scriptlanguage="javascriptn>

varmy=document.getElementByld("my").getContext("2d");

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,0,2*Math.PI,

true);

my.closePath();

my.fillO；

}

this.move=function(dx_,dy){

my.clearRect(this.px-this.radius^this.py

this.radius,2*this.radius,2*this.radius);

this.px+=dx;

this.py+=dy;

}

}

varflag=0

varsx,sy,ex,ey;

varcanvas=document.getElementByld("my");

canvas.onmouseup=function(ev){

if((ev.clientX)||(ev.clientY)){

if(flag==0){

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>

3.利用＜canvas＞标签绘制一个钟表，效果如图6-26所示。

图6-26习题3执行效果

参考代码：

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF"8">

<titlex/title>

</head>

<body>

<divstyle二"width:600px;height:600px;margin:auto">

<canvasid="myCanvas"width="600px"height="600px"

style=""></canvas>

</div>

<scripttype="text/javascript">

initCanvas();

functioninitCanvas(){

〃获取画布地dom对象

//alert(l);

letcanvas=document.getElementByld("myCanvas");

letdraw=canvas.getContext('2d');

//canvas

setlnterval(function(){

canvass(draw);

},1000);

)

functioncanvass(draws){

vartime=newDate();

vary=time.getFullYear();

varmon=time.getMonth()+1;

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+'1;

varmin_lenth=min_str.length;

vars=time.getSeconds();

vars__str=s+'';

vars_lenth=s_str.length;

letdraw=draws;

draw.clearRect(0J0,600,600);

for(vari=0;i<12;i++){

draw.save();

draw.lineWidth=4;

draw.strokestyle="red";

draw.translate(300,300);

draw.rotate(i*30*Math.PI/180);

draw.beginPath();

draw.moveTo(0,170);

draw.lio(0j190);

draw.closePath();

draw,stroke。；

draw,restore。；

)

〃绘制刻度

for(leti=0;i<60;i++){

draw.save();

draw.translate(300,300);

draw.rotate(i*6*Math.PI/180);

draw.lineWidth=2;

draw.strokestyle="red";

draw.beginPath();

draw.moveTo(0?190);

draw.lio(0,180);

draw.closePath();

draw,stroke。；

draw,restore。；

}

〃绘制时针

draw,save。；

draw.strokestyle="orange";

draw.translate(300300);

lethourzs=h+min/60;〃计算当前是几点

draw.rotate(hourzs*30*Math.PI/180);

draw.linewidth=6;

draw.beginPath();

draw.moveTo(0J0);

draw.lio(0,-90);

draw.closePath();

draw,stroke。；

draw,restore。；

〃绘制分针

draw,save。；

draw.translate(300300);

draw.rotat

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

最新文档

评论

0/150

提交评论