要求:在本文檔中的題目下作答,提交本word文檔即可。
上次的作業(yè)大家都完成得很棒!筆芯~
接下來(lái)我們就去豐富內(nèi)容啦。Number one在導(dǎo)航部位新添加一個(gè)動(dòng)畫頁(yè)面鏈接。常言道:愛在心口難開。表達(dá)愛怎么能少的了?呢。
任務(wù):在新的頁(yè)面讓來(lái)我們來(lái)制作一個(gè)心型的動(dòng)畫,來(lái)獲取芳心吧。
圖上是用canvas畫出的動(dòng)態(tài)的心形圖片,參考代碼如下:
<img id="flower" src="img/img-1.jpg">
<canvas id="drawing" width="520" height="500"></canvas>
<script type="text/javascript">
var drawing = document.getElementById("drawing"),
pic = document.getElementById('flower'),
content = drawing.getContext("2d"),
radian = 0,
radian_add = Math.PI/40;
content.translate(250,250);
function heart(){
X = getX(radian);
Y = getY(radian);
(1) //在給定坐標(biāo)位置繪制給定大小的圖片
radian+=radian_add;
if (radian > (2*Math.PI)){ //繪制完整的心型線后取消間歇調(diào)用
clearInterval(intervalId);
}
}
intervalId = setInterval(heart,100); //設(shè)置間歇調(diào)用,間隔為100ms
function getX(t){ //獲取心型線的X坐標(biāo)
return 10*(16*Math.pow(Math.sin(t),3))
}
function getY(t){ //獲取心型線的Y坐標(biāo)
(2)
}
1.請(qǐng)用在給定坐標(biāo)位置繪制給定大小的圖片,在空白(1)處填寫代碼。
2.請(qǐng)?jiān)诳瞻滋睿?)處獲取心型線的Y坐標(biāo),填寫代碼。
奧鵬,國(guó)開,廣開,電大在線,各省平臺(tái),新疆一體化等平臺(tái)學(xué)習(xí)
詳情請(qǐng)咨詢QQ : 3230981406或微信:aopopenfd777