HTML5應(yīng)用開發(fā)課后習(xí)題題庫期末考試試卷及答案_第1頁
HTML5應(yīng)用開發(fā)課后習(xí)題題庫期末考試試卷及答案_第2頁
HTML5應(yīng)用開發(fā)課后習(xí)題題庫期末考試試卷及答案_第3頁
HTML5應(yīng)用開發(fā)課后習(xí)題題庫期末考試試卷及答案_第4頁
HTML5應(yīng)用開發(fā)課后習(xí)題題庫期末考試試卷及答案_第5頁
已閱讀5頁，還剩2頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

實(shí)操題：

1.利用《anvas＞標(biāo)簽繪制黃色描邊紅色填充地文字，如圖6-24所示。

WelcometomyWeb

圖6-24習(xí)題1執(zhí)行效果

參考代碼：

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<titlex/title>

</head>

<body>

<canvasid="myCanvas"width="600"height="400"x/canvas>

<scripttype="text/javascript">

vancanvas=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,16);

</script>

</body>

</html>

2.利用《anvas>標(biāo)簽通過鼠標(biāo)事件與線段繪制，第一次點(diǎn)擊地位置為線段起點(diǎn)，隨意若干次

點(diǎn)擊皆為終點(diǎn)，繪制出放射狀圖形，如圖6-25所示。

圖6-25習(xí)題2執(zhí)行效果

參考代碼：

<!DOCTYPEhtml>

<head>

<metacharset="UTF-8">

<titlex/title>

</head>

<body>

<divstyle="border:lpxsolidred"xcanvasid="my"width="1000"

height="500"></canvas></div>

<scriptlanguage="javascript">

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.arcCthis.px,this.py^this?radius,0,2*Math.PI,

true);

my.closePath();

)

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.moveToCsx,sy);

my.lioCex,ey);

my.closePath();

my.strokestyle="green";

my.stroke();

)

)

}

</script>

</body>

</html>

3.利用＜canvas＞標(biāo)簽繪制一個(gè)鐘表，效果如圖6-26所示。

圖6-26習(xí)題3執(zhí)行效果

參考代碼：

<>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對象

//alcrt(l);

letcanvas=document.getElementByld("myCanvas");

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

//canvas

setlnterval(function(){

canvass(draw);

},1000)；

}

functioncanvass(draws){

vantime=newDate();

vany=time.getFullYear();

vanmon=time.getMonth()+1;

vand=time.getDate();

vanw=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(0,0,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(0,190);

draw.closePath();

draw.stroke();

draw.restore();

)

〃繪制刻度

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

draw.savc();

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();

)

〃繪制時(shí)針

draw.save();

draw.strokestyle="orange";

draw.translate(300300);

lethourzs=h+min/60;〃計(jì)算當(dāng)前是幾點(diǎn)

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

draw.linewidth=6;

draw.beginPath();

draw.moveTo(0,0);

draw.lio(0?-90);

draw.closePath();

draw,stroke。；

draw.restore();

〃繪制分針

draw.save();

draw.translate(300300);

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論