13.9本章小结
在本章中,我们学习了名为canvas的一个新的HTML元素。使用画布的绘制环境,我们可以很容易地绘制矩形、线条和圆,可以很好地控制它们的位置、线条宽度和颜色等。
在下一章中,我们将学习如何实现绘制动画,将要用到在第9章中学到的一些技术。
13.10 编程挑战
尝试这些挑战以练习绘制到画布
#1:一个绘制雪人的函数
构建代码以绘制一个雪人(参见13.8节中的“试试看”),编写一个函数来在一个特定位置绘制雪人,从而像下面这样调用它:
将会在点(50,50)绘制一个雪人。
#2:绘制点的数组
编写一个函数,它将接受点的一个数组,如下所示:
并且绘制一条直线连接起这些点。在这个例子中,该函数将会从(50,50)到(50,100)到(100,100)到(100,50)绘制一条线,并且最终回到(50,50)。
现在,使用该函数来绘制如下的点:
提示:可以使用点[0][0]来获取第一个X坐标,用点[0][1]来获取第一个Y坐标。
#3:用鼠标绘画
使用jQuery和mousemove事件,无论何时当你把鼠标移动到画布上的时候,在鼠标位置绘制一个半径为3像素的填充圆。由于每次轻微地移动鼠标都会触发这个事件,因此当在画布上移动鼠标的时候,这些圆将会连接成一条线。
提示:参考第10章回顾如何响应mousemove事件。
#4:绘制Hgngman中的人
在第7章中,我们创建了自己的Hgngman游戏。现在,你想要在玩家每次猜错一个字母的时候绘制火柴人的一部分,从而使其更加接近真实的游戏。
提示:记录玩家猜错的次数。编写一个函数,它接受这个数字作为一个参数,并且根据传入的数字来绘制身体的不同部分。
本站内容未经许可,禁止任何网站及个人进行转载。