本节书摘来自华章出版社《HTML5 2D游戏编程核心技术》一书中的第3章，第3.11节，作者［美］ 戴维·吉尔里，更多章节内容可以访问云栖社区“华章计算机”公众号查看。
3.11 练习
canvas元素的二维绘图环境有四个属性用于绘制阴影：shadowColor：CSS颜色字符串、过渡和图案，用于绘制阴影。shadowOffsetX：阴影X方向上的偏移量，以像素点为单位。shadowOffsetY：阴影Y方向上的偏移量，以像素点为单位。shadowBlur：应用到阴影中的高斯模糊度；数越大，阴影越模糊。在本章的游戏版本中，drawPlatform()函数设置了前面提到的四个属性值，再加上lineWidth、f?illStyle、strokeStyle以及globalAlpha，在平台下面创造阴影。这些阴影会影响到帧速率吗？
注意，练习1中添加的平台阴影属性不仅会给平台添加阴影，还给跑步小人的图像添加阴影。这是因为设置的阴影属性影响到了canvas元素中所有图形（除了getImage()函数和putImage()函数，它们没有在本书中讨论）的操作。为了只给平台添加阴影，而不影响跑步小人，在drawPlatform()函数的开始位置保存绘图环境状态，并在函数的结尾处恢复它，可以分别使用context.save()和context.restore()两个函数来实现。在context.save()和context.restore()之间关于图形环境的任何设置，仅仅会在这两个调用之间起作用。最后，你只会在平台下面看到阴影，在跑步小人下面却看不到。使用一个不同的背景来完成本章中的游戏版本。确保新背景左右边缘垂直的几行像素不一样，如3.5节中描述的那样。在动画运行时两个背景图像的不连续性明显吗？运行本章中的游戏版本，在电脑上做一些其他的事情，观察帧速率是否降低。降低游戏速率的好方法包括：在另一个浏览器窗口中，播放YouTube视频、运行系统后台软件、打开半透明窗口等。 相关资源：敏捷开发V1.0.pptx