canvas做动画的效果比div流畅很多,而且复杂的动画不会很卡,很多效果是由js实现的,css可以提供的属性比较少,canvas做一些牛皮的动画,更多的需要一点几何学(滑稽)
canvas做动画的原理是一帧一帧来的(可以体会到画家的辛苦哦),每次需要清空画板重新渲染,所以在做动画需要一直循环然后通过公式来绘制出运动轨迹。
下面我会放其他教程更全面的链接 和 一个Demo
效果
DOM节点
1 | <canvas width="400" height="200" style="border: 1px solid #000000;"> |
width和height只能在canvas节点中设置
如果canvas渲染失败,会显示内容
初始2d画布
1 | var canvas = document.getElementsByTagName('canvas')[0] //获取节点 |
有多个画布的话 getTag可以更方便的获取想操作的画布
填3d
就得到3d画板了
矩形构造函数
1 | function ItcastRect(option) { |
这里构造函数new出来后就是一个方块,并且每次render都会清屏一次,清屏大小是拟定的,跟canvas大小一样
constructor可以不写,这里重定向原型到ItcastRect
方法上,不写的话默认返回Object
移动方块
1 | //初始化一下方块 |
用递归的方式移动方块,用一些简单的公式计算下一个位置,然后清空画布重新渲染。
canvas详解
讲的挺好的,canvas有很多基础属性需要花点时间看看。