|
要求:在本文档中的题目下作答,提交本word文档即可。$ W& ^ g7 R( s5 F
上次的作业大家都完成得很棒!笔芯~
& O/ @% E0 v# l5 A接下来我们就去丰富内容啦。Number one在导航部位新添加一个动画页面链接。常言道:爱在心口难开。表达爱怎么能少的了❤呢。2 w" L+ C, p& t2 \; _
任务:在新的页面让来我们来制作一个心型的动画,来获取芳心吧。; H6 \2 t) t* ^: G9 Z/ Z" Y
" G- `+ `9 n2 }: Z( d* G# v- c! H
: Z/ }2 L- O0 m& J5 `2 ]4 P4 h
% P7 h m! o3 z8 Y/ v3 l3 h5 c3 F; g图上是用canvas画出的动态的心形图片,参考代码如下:
_# _ Z9 i) t<img id="flower" src="img/img-1.jpg">' f1 k/ s3 j- f: p B
<canvas id="drawing" width="520" height="500"></canvas>5 H9 M! H: J$ {# l$ X
<script type="text/javascript">2 ]( H- h$ c2 x
var drawing = document.getElementById("drawing"),0 ?0 W5 \5 C6 @) E2 r W# {# ]
pic = document.getElementById('flower'),- H1 y. m1 B8 I* `
content = drawing.getContext("2d"),
) ]+ W! d% j+ p radian = 0,
& @' @( o) r; ]7 V( |( k; C radian_add = Math.PI/40;
- `) t" D0 u6 _ content.translate(250,250);( z2 F& N. C7 t8 o% n4 i3 M
function heart(){
& `$ v k+ e( f- B" e- ^ X = getX(radian);! u% p$ n0 Y4 U/ ~: k, w: X% d9 f
Y = getY(radian);
8 w( U z( C! p1 n& D (1) //在给定坐标位置绘制给定大小的图片" O/ ?8 q. p: b/ o3 \& E. X( ]
radian+=radian_add;0 m2 Y# Z" ~% t: H9 c
if (radian > (2*Math.PI)){ //绘制完整的心型线后取消间歇调用
1 ?* V3 F+ Z4 c3 L7 _7 { clearInterval(intervalId);( P0 D' D- f, j: o" |) m: n
}
# r* E) b2 P+ L0 \& m) a: E2 O }! N1 ~, w! o3 i6 D
intervalId = setInterval(heart,100); //设置间歇调用,间隔为100ms5 b$ |% N) B$ g7 T0 ~1 U
function getX(t){ //获取心型线的X坐标
+ n" i; J4 i ]2 b! S return 10*(16*Math.pow(Math.sin(t),3))
( {6 C( B' ]" d" v' N; q- E }
7 i$ ]. X( x) ]3 ^' \3 |$ S6 X) g& o4 e6 J$ i, |2 A" q4 u2 R
function getY(t){ //获取心型线的Y坐标& K$ J7 s1 P: w" x
(2) $ E4 U7 d+ e7 y- ~' Q2 n- K" [
}
. T) H$ e) Q' {+ P v9 m6 b" t5 l; _7 }
! X4 c. f0 o8 F4 D* F ^3 m$ c5 @0 a4 h1.请用在给定坐标位置绘制给定大小的图片,在空白(1)处填写代码。! i3 B: s! v, m9 n' P: R9 g1 f
0 D8 {( S+ K* ?) R
2.请在空白填(2)处获取心型线的Y坐标,填写代码。3 Z6 J5 \* H7 ]/ l+ N; O% {1 q6 E
/ S- ]3 S1 Q1 z! b) U
|
|