《HTML52D遊戲程式設計核心技術》——第3章，第3.11節練習

本節書摘來自華章出版社《HTML5 2D遊戲程式設計核心技術》一書中的第3章，第3.11節，作者［美］　戴維·吉爾裡，更多章節內容可以訪問雲棲社群“華章計算機”公眾號檢視。

3.11　練習

1. canvas元素的二維繪圖環境有四個屬性用於繪製陰影：
   shadowColor：CSS顏色字串、過渡和圖案，用於繪製陰影。

shadowOffsetX：陰影X方向上的偏移量，以畫素點為單位。
shadowOffsetY：陰影Y方向上的偏移量，以畫素點為單位。
shadowBlur：應用到陰影中的高斯模糊度；數越大，陰影越模糊。
在本章的遊戲版本中，drawPlatform()函式設定了前面提到的四個屬性值，再加上lineWidth、f?illStyle、strokeStyle以及globalAlpha，在平臺下面創造陰影。這些陰影會影響到幀速率嗎？

1. 注意，練習1中新增的平臺陰影屬性不僅會給平臺新增陰影，還給跑步小人的影像新增陰影。這是因為設定的陰影屬性影響到了canvas元素中所有圖形（除了getImage()函式和putImage()函式，它們沒有在本書中討論）的操作。
   為了只給平臺新增陰影，而不影響跑步小人，在drawPlatform()函式的開始位置儲存繪圖環境狀態，並在函式的結尾處恢復它，可以分別使用context.save()和context.restore()兩個函式來實現。在context.save()和context.restore()之間關於圖形環境的任何設定，僅僅會在這兩個呼叫之間起作用。最後，你只會在平臺下面看到陰影，在跑步小人下面卻看不到。
2. 使用一個不同的背景來完成本章中的遊戲版本。確保新背景左右邊緣垂直的幾行畫素不一樣，如3.5節中描述的那樣。在動畫執行時兩個背景影像的不連續性明顯嗎？
3. 執行本章中的遊戲版本，在電腦上做一些其他的事情，觀察幀速率是否降低。降低遊戲速率的好方法包括：在另一個瀏覽器視窗中，播放YouTube視訊、執行系統後臺軟體、開啟半透明視窗等。