《响应式Web设计：HTML5和CSS3实践指南》——2.5节使用画布旋转文本

本节书摘来自华章社区《响应式Web设计：HTML5和CSS3实践指南》一书中的第2章，第2.5节使用画布旋转文本，作者（美）　Benjamin LaGrone，更多章节内容可以访问云栖社区“华章社区”公众号查看

2.5　使用画布旋转文本
HTML5中的画布元素不只是能给文本着色或者添加阴影，你也可以用它来移动或操作位于画布区域中的元素对象。在本节中，我们将旋转位于画布中的元素对象。

2.5.1　准备工作
学习本节需要掌握之前的几节。如果跳过了之前的几节也没关系，你还可以参照完整代码来学习。

2.5.2　实现方式
一旦你完成了之前技巧中的画布设置步骤，那么实现旋转的基本步骤很简单。在函数开头添加一个rotate方法的调用。

效果如下图所示。

2.5.3　工作原理
JavaScript能够通过rotate方法来旋转整个画布以及绘制在画布中的所有元素。只是在决定使用该方法时需要预先考虑所使用的场景和进行相关设置。虽然看起来有些复杂，但这不失为在大型web项目中实现响应式设计的理想工具。