写在前面

不读文章，只对代码感兴趣可以直接跳转到这里 https://github.com/AlloyTeam/AlloyGameEngine
然后 star 一下，多谢支持:)。

游戏或者应用中，不是所有的地方都是贴图，Shape 也有很常见的应用场景，如游戏中显示 HP 的血条。大量的 Shape 可以组成矢量图。矢量图的好处是放大不失真，也就是不会变模糊；而位图放大失真，失真的程度要看其平台插值算法的牛 B 程度，但放大效果越好的算法，速度越慢，所以大部分平台会在速度和效果上取个折中。

绘制 Shape 根绘制位图本质不一样，绘制位图可以充分利用 GPU 渲染（当然也可以不用），绘制 Shape 必须经过 CPU 先进行数学计算和图形学相关算法（比如你可以尝试不使用 api，而使用点去绘制贝塞尔曲线、圆形、线条等，你做的所有数学工作，就是计算机做的工作），然后再进行渲染。所以很显然，绘制大量的 Shape 会造成帧率下降。

那么又想使用 Shape，又不想降低帧率怎么办？

绘制 Shape 和绘制图片又不冲突。Shape 可以转成图片进行渲染，跟 Shape 类似的还有文字，文字也可以转成图片再进行绘制以提高绘制帧率，意思就是：
1. 经过 CPU 先进行数学计算和图形学相关算法
2. 渲染至某个备份 Canvas
3. 以后游戏或者应用中的 core loop 直接把备份 Canvas 绘制上去，而不用去重新计算
4. 当 Shape 有更改的时候才去更新备份 Canvas

这里需要注意的是：必须知道 Shape 所占据的宽高。

Shape 类

AlloyRenderingEngine 内置了 Shape 类用于绘制几何形状。
其 API 设计与命名也 Canvas 的 Context2d 的一致，不同在与：
1. 使用了连缀的方法调用方式，
2. 最后要调用 end() 结尾
3. 需要增加到舞台

如入画一个圆：

可以看到，创建 Shape 的实例需要传两个参数，一个代表宽，一个代表高。具体为什么要传这两个参数，请从文章开头重新读一遍:)。
以此类推。其他的方法还有：moveTo、lineTo、bezierCurveTo、stroke、fillStyle、fillRect、clear、clearRect 等…

而 shape 也拥有 scale、scaleX、scaleY、skewX、skewY、rotation、x、y、alpha 等属性

举个栗子 (鼠标放在球上然后滚动你的滚轮试试)

再举个栗子 (鼠标放在老虎上然后滚动你的滚轮试试)

滚轮事件怎么搞滴？

简单吧！

Github

https://github.com/AlloyTeam/AlloyGameEngine
据说 star 一下不会怀孕= =！多谢支持:)！