13.9本章小结

  在本章中,我们学习了名为canvas的一个新的HTML元素。使用画布的绘制环境,我们可以很容易地绘制矩形、线条和圆,可以很好地控制它们的位置、线条宽度和颜色等。

  在下一章中,我们将学习如何实现绘制动画,将要用到在第9章中学到的一些技术。

《javascript-少儿编程》第13章canvas元素之本章小结及挑战编程

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游戏。现在,你想要在玩家每次猜错一个字母的时候绘制火柴人的一部分,从而使其更加接近真实的游戏。

提示:记录玩家猜错的次数。编写一个函数,它接受这个数字作为一个参数,并且根据传入的数字来绘制身体的不同部分。

《javascript-少儿编程》第13章canvas元素之本章小结及挑战编程


本站内容未经许可,禁止任何网站及个人进行转载。