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)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

實(shí)操題：

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

WelcometomyWeb

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

參考代碼：

<!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>標(biāo)簽通過鼠標(biāo)事件與線段繪制，第一次點(diǎn)擊地位置為線段起點(diǎn)，隨意若干次

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

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

參考代碼：

<!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＞標(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對(duì)象

//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。；

}

〃繪制時(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(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等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(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ǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論