HTML5 canvas 动画基础自学分享 1
1.了解canvas元素
学习了canvas元素后,感觉能不用插件在页面上画图很好,就深入了解了一下.我愿意把我学习到的分享出来,一来给初学者一点帮助,二来可以让大家指出我的不足之处.在下还只是在学习阶段.希望得到高人的指点哈.
本系列致力于简单的动画特效,或者游戏特效.我会将我的思考一步一步讲述出来.可能会很基础.但是一定能带你走进这个新奇的元素. 希望与君共学习. Let us begin!
今天是第一天,我开始学习了canvas中的API.知道这是一个画布元素,要想在里面画东西,就要得到它的上下文(有的也叫绘图环境).利用这个上下文,用JS调用API.从而在画布上显示图像.例如这样:
初识 canvas
可以看到页面上有一个小方块,这就是canvas元素,可以在里面进行绘图了.canvas默认的大小是300*150.可以看出canvas元素就和其他的元素是一样的,是页面描述的一部分而已.
那么先来画一个图形吧.恩! 看看下面的代码.
这些API都可以在W3C中找到,由于这不是本文的重点,就不累述了.只是要注意的几点(也是在下在学习的过程中遇到的问题).
1.要fill(),stroke()是把路径填充显示出来的.用的路径的话,一定要记得清除路径,就是beginPath().
2.刷新canvas有2中方法,一个是clearRect(),这个不仅可以清除canvas中所以的图像,还可以清除一部分,从而创造出复杂的图像,但是它不会清除画笔.还有一个是改变canvas的大小,默认改变canvas的大小后,canvas中的图像清除,还有画笔也会被清除,就是默认的黑色.
下面是我写的小球碰撞试验,虽然这种代码很多,但是这是基础.有了这个基础,就离我的目标进了一步,要问我的目标是什么,就是用canvas写游戏啦.
初识 canvas
动画: 由帧构成, 所以叫补帧动画.
每一帧就是一附图片,人的眼睛有视觉停留的功能,大约每秒能看24附图片.然后这些图片经过大脑的加工,就让人感觉到物体在移动了.所以,动画就是图片,在这样就是canvas中的内容,只要canvas中的内容改变,就能形成动画了.
这种写法不是很科学,但是,能够实现我想要的效果,记得一位大师说过,写代码不一定要多么的复杂,只要是你想要的结果,那什么代码都行.在这个基础上,可以实现碰撞后改变球的颜色,大小等.
也可以碰撞后减小速度.这不就是一个台球吗?虽然不是很完善,但有了这种思想,就一定OK的了.附上小球改变大小的实例. 还可以改变更多东西,你能想到的,就去实现吧.
初学者大多都是这样写的吧,我也不例外,但是在以后的代码中,这种就会很少出现了.应为JS是面向对象的,那就用面向对象的来写吧. 明天继续 今天就到这里吧
下面是小球运动改变大小的代码: 希望能想到更多的东西.
初识 canvas