HTML5应用开发课后习题题库期末考试试卷及答案 (11).docx

《HTML5应用开发课后习题题库期末考试试卷及答案 (11).docx》由会员分享，可在线阅读，更多相关《HTML5应用开发课后习题题库期末考试试卷及答案 (11).docx（4页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、实操题：L利用canvas标签绘制黄色描边红色填充地文字，如图6-24所示。Welcome to myWeb图6.24习题1执行效果参考代码：var canvas = document.getElementById(myCanvasM);var context = canvas.getContext(H2d);context.font = bold 50px Arial;context.textBaseline = top”；context .fillstyle = red1;context.fillText(nWele to myWeb”, 10, 10);context.linewidth

2、 = nln;context.strokestyle = yellow;context.strokeText(Wele to myWeb“， 10, 10);2 .利用标签通过鼠标事件与线段绘制，第一次点击地位置为线段起点，随意假设干次 点击皆为终点，绘制出放射状图形，如图6-25所示。图6-25习题2执行效果参考代码：var my = document.getElementByld(my).getContext(2d);function Ball(px, py, radius, style) this.px = px;this.py = py;this.radius = radius;thi

3、s.style = style;this.draw = function() my.fillstyle = this.style;my.beginPath();my.arc(this.pxJ this.py, thisradius, 0, 2 * Math.PI, true);my.closePath();)this.move = function(dx dy) my.clearRect(this.px - thisradius, this.py -this.radius, 2 * this.radius, 2 * this.radius);this.px += dx; this.py +=

4、dy;var flag = 0var sx, sy, ex, ey;var canvas = document.getElementById(umyn);canvas.onmouseup = function(ev) if(ev.clientX) | (ev.clientY) (flag = 0) sx = ev.clientX; sy = ev.clientY; console.log(sx + 1 1 + sy);flag+; else ex = ev.clientX;ey = ev.clientY;console.log(ex + 1 1 + ey); my.beginPath();my

5、.moveTo(sx sy);my.lio(eXj ey);my.closePath();my.strokestyle = green; my .stroke。；).利用标签绘制一个钟表,效果如图6-26所示。图6-26习题3执行效果参考代码： initCanvas();function initCanvas() /获取画布地dom对象 / alert(l);let canvas = document.getElementById(myCanvas); let draw = canvas.getContext(12d1);II canvas setinterval(function() can

6、vass(draw);, 1000)； )function canvass(draws) var time = new Date(); var y = time.getFullYear(); var mon = time.getMonth() + 1; var d = time.getDate();var w = time.getDay();van week =var englishWeek = 11;var h = time.getHours();var h_str = h + * 1;var h_lenth = h_str.length;var min = time.getMinutes(

7、);var min_str = min + 11;var min_lenth = min_str.length;var s = time.getSeconds();var s_str = s + 11;var s_lenth = s_str.length;let draw = draws;draw.clearRect(0J 0, 60。， 600);for(var i = 0; i 12; i+) draw.save();draw.linewidth = 4;draw.strokestyle = red;draw.translate(300., 300);draw.rotate(i * 30

8、* Math.PI / 180);draw.beginPath(); draw.moveTo(0, 170);draw.lio(0) 190);draw.closePath();draw, stroke。； draw.restore();绘制刻度for(let i = 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(0J 190);

9、draw.lio(0, 180);draw.closePath();draw, stroke。； draw.restore();/绘制时针 draw.save(); draw.strokestyle = orange; draw.translate(300., 300);let hourzs = h + min / 60; /计算当前是几点 draw.rotate(hourzs * 30 * Math.PI / 180); draw.linewidth = 6;draw.beginPath();draw.moveTo(0 0);draw.lio(0J -90);draw.closePath()

10、;draw, stroke。； draw.restore();/绘制分针draw.save();draw.translate(300, 300);draw.rotate(min * 6 * Math.PI / 180);draw.strokestyle = orange;draw.linewidth = 3;draw.beginPath();draw.moveTo(0J 0);draw.lio(0J -130);draw.closePath();draw.stroke();draw, restore。；/画秒针draw.save();draw.translate(300, 300);draw.

11、rotate(s * 6 * Math.PI / 180);draw.strokestyle = orange;draw.linewidth = 1;draw.beginPath();draw.moveTo(0J 15);draw.lio(0, -180);draw.closePath();draw.stroke();draw.restore();/画中心原点draw.fillstyle = yellow;draw.linewidth = 2;draw.beginPath();draw.arc(300 300, 5, 0, 36。， false);draw.closePath(); draw.fill();