寫(xiě)在前面

不讀文章，只對(duì)代碼感興趣可以直接跳轉(zhuǎn)到這里 https://github.com/AlloyTeam/AlloyGameEngine
然后star一下，多謝支持:)。

游戲或者應(yīng)用中，不是所有的地方都是貼圖，Shape 也有很常見(jiàn)的應(yīng)用場(chǎng)景，如游戲中顯示HP的血條。大量的Shape可以組成矢量圖。矢量圖的好處是放大不失真，也就是不會(huì)變模糊；而位圖放大失真，失真的程度要看其平臺(tái)插值算法的牛B程度，但放大效果越好的算法，速度越慢，所以大部分平臺(tái)會(huì)在速度和效果上取個(gè)折中。

繪制Shape根繪制位圖本質(zhì)不一樣，繪制位圖可以充分利用GPU渲染（當(dāng)然也可以不用），繪制Shape必須經(jīng)過(guò)CPU先進(jìn)行數(shù)學(xué)計(jì)算和圖形學(xué)相關(guān)算法（比如你可以嘗試不使用api，而使用點(diǎn)去繪制貝塞爾曲線、圓形、線條等，你做的所有數(shù)學(xué)工作，就是計(jì)算機(jī)做的工作），然后再進(jìn)行渲染。所以很顯然，繪制大量的Shape會(huì)造成幀率下降。

那么又想使用Shape，又不想降低幀率怎么辦？

繪制Shape和繪制圖片又不沖突。Shape可以轉(zhuǎn)成圖片進(jìn)行渲染，跟Shape類(lèi)似的還有文字，文字也可以轉(zhuǎn)成圖片再進(jìn)行繪制以提高繪制幀率，意思就是：
1.經(jīng)過(guò)CPU先進(jìn)行數(shù)學(xué)計(jì)算和圖形學(xué)相關(guān)算法
2.渲染至某個(gè)備份Canvas
3.以后游戲或者應(yīng)用中的core loop直接把備份Canvas繪制上去，而不用去重新計(jì)算
4.當(dāng)Shape有更改的時(shí)候才去更新備份Canvas

這里需要注意的是：必須知道Shape所占據(jù)的寬高。

Shape類(lèi)

AlloyRenderingEngine內(nèi)置了Shape類(lèi)用于繪制幾何形狀。
其API設(shè)計(jì)與命名也Canvas的Context2d的一致，不同在與：
1.使用了連綴的方法調(diào)用方式，
2.最后要調(diào)用end()結(jié)尾
3.需要增加到舞臺(tái)

如入畫(huà)一個(gè)圓：

可以看到，創(chuàng)建Shape的實(shí)例需要傳兩個(gè)參數(shù)，一個(gè)代表寬，一個(gè)代表高。具體為什么要傳這兩個(gè)參數(shù)，請(qǐng)從文章開(kāi)頭重新讀一遍:)。
以此類(lèi)推。其他的方法還有：moveTo、lineTo、bezierCurveTo、stroke、fillStyle、fillRect、clear、clearRect等…

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

舉個(gè)栗子(鼠標(biāo)放在球上然后滾動(dòng)你的滾輪試試)

再舉個(gè)栗子(鼠標(biāo)放在老虎上然后滾動(dòng)你的滾輪試試)

滾輪事件怎么搞滴？

 簡(jiǎn)單吧！

Github

https://github.com/AlloyTeam/AlloyGameEngine
據(jù)說(shuō)star一下不會(huì)懷孕= =！多謝支持:)！