|
要求:在本文档中的题目下作答,提交本word文档即可。6 H' ~. f1 w6 K+ J1 X
上次的作业大家都完成得很棒!笔芯~# N8 C9 ?( n" o2 ]
接下来我们就去丰富内容啦。Number one在导航部位新添加一个动画页面链接。常言道:爱在心口难开。表达爱怎么能少的了❤呢。
) l5 x* @& z" D( D9 X2 N2 l任务:在新的页面让来我们来制作一个心型的动画,来获取芳心吧。6 @) k4 ^6 l" K0 C3 G; c' A1 s. a
! w9 P8 M" K4 V, _: h8 k" d. |
" o# W/ E6 H: S4 M8 q* ~' k
- a9 I% q% n( K- z图上是用canvas画出的动态的心形图片,参考代码如下:
! F# ~$ |% J- {<img id="flower" src="img/img-1.jpg">6 d+ c( p" i2 A& o) O
<canvas id="drawing" width="520" height="500"></canvas>
1 |; c/ `& ], `! g- o <script type="text/javascript">; ?. H8 {# T) |$ Q& e4 s( v
var drawing = document.getElementById("drawing"),
( R( I% z& f$ W3 B: G pic = document.getElementById('flower'),
2 Z: V' \ n* n content = drawing.getContext("2d"),5 [/ E7 e: d, O `% q% c
radian = 0,
9 ?! h1 ~3 n* P8 _ X! d1 Y$ E, O radian_add = Math.PI/40;
, j, e; E7 `% X9 u content.translate(250,250);/ i3 E ?- [9 w1 x2 W* v
function heart(){% O$ ]- o ^; T
X = getX(radian);
# p, X/ S s `/ [" }2 E Y = getY(radian);
6 C) s$ z {: L7 c (1) //在给定坐标位置绘制给定大小的图片
/ t& z3 V7 j" ~# K. z1 G$ N. T radian+=radian_add;
& b* ~: q: v0 s& S# f- F3 q5 [ if (radian > (2*Math.PI)){ //绘制完整的心型线后取消间歇调用
* z& n% Q' [2 J: B clearInterval(intervalId);" u% ~% p; Z( N6 g$ N+ k
}2 ]5 H! k4 S/ L
}
7 S1 v1 m+ D1 c5 ~ intervalId = setInterval(heart,100); //设置间歇调用,间隔为100ms
1 t! P$ a/ M3 t' M! @ function getX(t){ //获取心型线的X坐标
( F( G* s* N1 P return 10*(16*Math.pow(Math.sin(t),3))! L7 C8 L. t# V: \
}
0 D+ g1 \7 n1 x, ~6 ]+ s C/ e7 B6 e" D' k# n0 G1 v
function getY(t){ //获取心型线的Y坐标. U- G& f& s* v$ k
(2) ; X; ~( q/ }4 ~! t" T" V! |. x
}
, f6 {$ h! J* S6 W# E
" U) N% d% G ?7 _5 M8 I$ G+ C! e7 T4 p% l
1.请用在给定坐标位置绘制给定大小的图片,在空白(1)处填写代码。" J+ F$ N H( Y3 a$ K) N. j
7 p* T& ?" ?& J" w; f0 @6 L% e
2.请在空白填(2)处获取心型线的Y坐标,填写代码。
. S4 H2 f1 I4 v5 I- c/ u6 H3 ?+ L7 B' _! }) Z2 N1 f* f
|
|