HTML5canvas动画基础自学分享1-创新互联
1.了解canvas元素
创新互联是一家集网站建设,固安企业网站建设,固安品牌网站建设,网站定制,固安网站建设报价,网络营销,网络优化,固安网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。学习了canvas元素后,感觉能不用插件在页面上画图很好,就深入了解了一下.我愿意把我学习到的分享出来,一来给初学者一点帮助,二来可以让大家指出我的不足之处.在下还只是在学习阶段.希望得到高人的指点哈.
本系列致力于简单的动画特效,或者游戏特效.我会将我的思考一步一步讲述出来.可能会很基础.但是一定能带你走进这个新奇的元素. 希望与君共学习. Let us begin!
今天是第一天,我开始学习了canvas中的API.知道这是一个画布元素,要想在里面画东西,就要得到它的上下文(有的也叫绘图环境).利用这个上下文,用JS调用API.从而在画布上显示图像.例如这样:
可以看到页面上有一个小方块,这就是canvas元素,可以在里面进行绘图了.canvas默认的大小是300*150.可以看出canvas元素就和其他的元素是一样的,是页面描述的一部分而已.
那么先来画一个图形吧.恩! 看看下面的代码.
这些API都可以在W3C中找到,由于这不是本文的重点,就不累述了.只是要注意的几点(也是在下在学习的过程中遇到的问题).
1.要fill(),stroke()是把路径填充显示出来的.用的路径的话,一定要记得清除路径,就是beginPath().
2.刷新canvas有2中方法,一个是clearRect(),这个不仅可以清除canvas中所以的图像,还可以清除一部分,从而创造出复杂的图像,但是它不会清除画笔.还有一个是改变canvas的大小,默认改变canvas的大小后,canvas中的图像清除,还有画笔也会被清除,就是默认的黑色.
下面是我写的小球碰撞试验,虽然这种代码很多,但是这是基础.有了这个基础,就离我的目标进了一步,要问我的目标是什么,就是用canvas写游戏啦.
动画: 由帧构成, 所以叫补帧动画.
每一帧就是一附图片,人的眼睛有视觉停留的功能,大约每秒能看24附图片.然后这些图片经过大脑的加工,就让人感觉到物体在移动了.所以,动画就是图片,在这样就是canvas中的内容,只要canvas中的内容改变,就能形成动画了.
这种写法不是很科学,但是,能够实现我想要的效果,记得一位大师说过,写代码不一定要多么的复杂,只要是你想要的结果,那什么代码都行.在这个基础上,可以实现碰撞后改变球的颜色,大小等.
也可以碰撞后减小速度.这不就是一个台球吗?虽然不是很完善,但有了这种思想,就一定OK的了.附上小球改变大小的实例. 还可以改变更多东西,你能想到的,就去实现吧.
初学者大多都是这样写的吧,我也不例外,但是在以后的代码中,这种就会很少出现了.应为JS是面向对象的,那就用面向对象的来写吧. 明天继续 今天就到这里吧
下面是小球运动改变大小的代码: 希望能想到更多的东西.
另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
文章名称：HTML5canvas动画基础自学分享1-创新互联
本文URL：http://ybzwz.com/article/cepggj.html
