您的位置: 主页>机器人编程>Javascript编程>《javascript-少儿编程》第13章canvas元素之本章小结
加盟酷吧机器人 培养孩子核心能力

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

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元素之本章小结及挑战编程

欧美思机器人教育加盟 赚钱好项目
上一篇:《javascript-少儿编程》第14章在画布上让物体移动
下一篇:《javascript-少儿编程》第13章canvas元素之用一个函
您可能喜欢
回到顶部