21秋《HTML5开发基础与应用》期末作业考核.docx

要求：在本文档中的题目下作答，提交本word文档即可。
上次的作业大家都完成得很棒！笔芯~
接下来我们就去丰富内容啦。Number one在导航部位新添加•个动画页面链接。常言 道：爱在心口难开。表达爱怎么能少的了”呢。
任务：在新的页面让来我们来制作一个心型的动画，来获取芳心吧。
这是我们的头SB区域 这是我们的辱航区域
这是侧边区域这是我们的主要内容区域这是我们的底部区域
图上是用canvas画出的动态的心形图片，参考代码如下：
<img id=wflower'1 src="img/img-l. jpg">〈canvas id="drawing" width="520" height="500"X/canvas> <script type="text/javascript">var drawing = document. gctElomcntBylcK^drawing"), pic = document. getElementByld(r flower'), content = drawing. getContext (,,2d,^), radian = 0,radian_add = Math. PI/40；
content, translate(250,250)；
function heart()(
X = getX(radian):
Y = getY(radian):
content, drawlmace (pic, X,Y, 45,45) ； 〃在给定坐标位 置绘制给定大小的图片
radian+=radian add；
if (radian > (2*Math. Pl)) ( 〃绘制完整的心型线后取消间歇调用clearInterval(intervalId)；
}
}
interval Id = setinterval (heart, 100): //设置间歇调用，间隔为 100ms
function getX(t) ( 〃获取心型线的X坐标
return 10*(16*Math. pow(Math. sin(t),3))
)
function getY(t) ( 〃获取心型线的Y坐标
return T0*(13*Math. cos (t) -5*Math. cos (2*t)-2*Math. cos (3*t)-Math. cos(4*t)) )
1. 请用在给定坐标位置绘制给定大小的图片，在空白（1）处填写代码。
2. 请在空白填（2）处获取心型线的Y坐标，填写代码。
答：
代码如下（注意：图片地址需要自己配置，才能有效果）■
22秋《HTML5开
发基础与应用》期
效果如下：
■存■打
■