少儿编程-在画布上让物体移动JS编程

2020-09-16    来源:网上    编辑:少儿编程
14章 在画布上让物体移动 用JavaScript创建画布动画,很像是创建一个定格动画(stop-motion Animation)。你绘制一个图形,暂停,擦除该图形,然后在一个新的位置重新绘制它。

  Visual Basic(这是我的初恋,易于上手,编出的小程序可以去炫耀)的话可以省去构建用户界面的时间,但是它和WINDOWS完美结合,如果要学习WINDOWS程序编写的话上手很快,2-3天就可以编出小程序,我么一边学习一边业余研究,编出了一个整人程序,现在还做了一个考试系统。虽然语言比较老,但依旧在中国乃至全球有很高的使用率,高中信息技术要求学习这个。C语言时间会长点,如果你英语好,数学逻辑性好,专心学那么学c语言只需要半年或几个月就可以了。如果英语一般那么一年就可以,其实学程序也需要天赋和钻研精神,但是从纯C的控制台应用到带有界面的应用程序也需要一定的时间去摸索。C的话比VB说更注重于算法或者数据结构之类的C++是一门用途很广的语言,是c语言的升级版,如果你懂C的话学会使用C++编一些简单程序大概需要三个月的时间,更深入地去了解那就要靠平时在使用过程中不断地去探索(总之和C差不多)。我现在也在学习C++,主要是为了信息学奥赛。

  14章 在画布上让物体移动

  用JavaScript创建画布动画,很像是创建一个定格动画(stop-motion Animation)。你绘制一个图形,暂停,擦除该图形,然后在一个新的位置重新绘制它。这听上去有很多个步骤,但是,JavaScript可以很快地更新图形的位置,以创建一个很平滑的动画。在第10章中,我们学习了如何DOM元素的动画。在本章中,我们将实现画布绘制的动画。

  14.1 在页面中移动

  我们使用画布和setInterval来绘制一个方块,并且让其缓慢地在页面上移动。创建一个名为canvasanimation.html的新文件,并且添加如下的HTML:

  现在,给script元素添加如下的JavaScript:

  代码的前两行创建了画布和环境。接下来,通过代码var position=0,创建了position变量并且将其设置为0。我们将使用该变量来控制方块从左向右移动。

  现在,调用setInterval来开始动画。setInterval的第一个参数是一个函数,每次调用它的时候,它会绘制一个新的方块。

1
3