HTML - Canvas 使用画布旋转文本

前言

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

准备工作

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

实现方式

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

你可能会发现位于画布上的文本向右旋转了。怎么回事？无论画布中含有什么元素，rotate方法默认会旋转整个画布。

画布的默认尺寸较小，为300px宽，150px高。修改画布中所含元素的尺寸属性不会影响画布尺寸，但会使画布中的元素对象失真。如果要修改画布及画布中元素的尺寸，可以通过在JavaScript中设置canvas.width和canvas.height属性来完成。

另外，因为整个画布自身被旋转了，但是文本旋转并没有围绕特定的参照点，因此文本位置需要被重新定位到正确位置。在本例子中，需要设置填充和笔画的偏移：

效果如下图所示。

工作原理

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