|
要求:在本文档中的题目下作答,提交本word文档即可。; Z6 z) [/ l1 U. m$ v8 W
上次的作业大家都完成得很棒!笔芯~- b+ R# q8 B" D, g$ i. y
接下来我们就去丰富内容啦。Number one在导航部位新添加一个动画页面链接。常言道:爱在心口难开。表达爱怎么能少的了❤呢。
0 Y, z; W# B. M5 v" W3 d. e+ k任务:在新的页面让来我们来制作一个心型的动画,来获取芳心吧。7 f- ~5 f- A* Q c) Y
- ~9 \6 @4 j1 f3 b Z6 X: u/ d
$ ~( V; n i6 t8 Y
u4 W ^$ y$ M- b; I+ [, M图上是用canvas画出的动态的心形图片,参考代码如下:5 Q; v$ o5 U8 S: \
<img id="flower" src="img/img-1.jpg">
6 X& V; Q! I3 D1 ~( c7 T<canvas id="drawing" width="520" height="500"></canvas>6 _4 d/ R. v/ `2 v# R# H
<script type="text/javascript">& ~8 g: V+ r$ B9 |, x! ~
var drawing = document.getElementById("drawing"),
1 E+ ^9 g1 E) P V8 l3 w7 Tpic = document.getElementById('flower'),
1 t; c" Y, h: U+ U. B- m# [* Icontent = drawing.getContext("2d"),
% t( h. `3 c! q! [1 `radian = 0,
+ b1 I' E O5 K9 [: a$ Nradian_add = Math.PI/40;7 f4 |. U5 H! b# t8 l; O
content.translate(250,250);& W9 G. d7 }& _0 X4 Q
function heart(){
: Q) v7 t# S0 e) Q X = getX(radian);, _! [* v& [9 v- L: r1 Q# W
Y = getY(radian);; k$ O% i& d9 V4 C+ K1 J
(1) //在给定坐标位置绘制给定大小的图片$ b% ~- K# i; ~* B
radian+=radian_add;8 \2 n; g K- q2 M! ~% Z* T1 ?
if (radian > (2*Math.PI)){ //绘制完整的心型线后取消间歇调用
. P" o6 z4 b& _; Z( g8 N5 Y: uclearInterval(intervalId);
8 i* }1 j, h: ] }9 o! l* z9 ]. I6 ^
}; C8 {4 |/ p' x: w8 t
intervalId = setInterval(heart,100); //设置间歇调用,间隔为100ms9 `3 T- j2 A t
function getX(t){ //获取心型线的X坐标4 x2 j) f* }$ U5 w2 e
return 10*(16*Math.pow(Math.sin(t),3))
2 R b! y$ U! d, r}
5 I# L3 w2 b( z. c% a/ c5 _4 r/ Q' [6 c, F4 O
function getY(t){ //获取心型线的Y坐标
( M; w9 D; k1 \* g3 T& x (2)
0 ]! K3 h4 k* D+ k5 J6 y" ^}: |, \, g8 F6 J( P0 F+ @4 H7 p! I' R
7 v5 n2 d& n( D: R7 d* [/ C1 ?
0 v9 w V0 I# G4 }8 v
1.请用在给定坐标位置绘制给定大小的图片,在空白(1)处填写代码。( }; t% O( M/ _* s% {6 w
" V5 f* Y5 I( S/ M2 [( Z' M2.请在空白填(2)处获取心型线的Y坐标,填写代码。" j/ g# O6 S$ R
0 d! t( C1 I7 F* v/ j
|
|