HTML Canvas rotate() 方法

在HTML5中，Canvas元素是一个非常强大的工具，可以用来绘制各种图形和动画。其中，rotate() 方法是Canvas中非常常用的一个方法，用来旋转绘制的图形或文本。

rotate() 方法的语法

rotate() 方法接受一个参数，表示旋转的角度，单位为弧度。方法的语法如下：

context.rotate(angle);

其中，angle 是一个表示旋转角度的数值，正值表示顺时针旋转，负值表示逆时针旋转。

rotate() 方法的应用

rotate() 方法可以应用于Canvas中所有绘制的元素，包括图形和文本。通过旋转Canvas的坐标系统，我们可以实现各种炫酷的效果，比如旋转动画、倾斜文本等。

下面是一个简单的示例代码，演示如何使用rotate() 方法在Canvas中绘制一个旋转的矩形：

// www.javascriptcn.com code example
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    ctx.fillStyle = 'red';
    ctx.fillRect(50, 50, 100, 50);

    ctx.translate(100, 75);
    ctx.rotate(Math.PI / 4);
    ctx.fillStyle = 'blue';
    ctx.fillRect(-50, -25, 100, 50);
</script>

在这段代码中，我们首先绘制了一个红色的矩形，然后通过translate() 方法将Canvas的坐标原点移到矩形的中心位置，再通过rotate() 方法将Canvas旋转了45度，最后绘制了一个蓝色的矩形。由于Canvas坐标系统已经旋转了，所以蓝色矩形的坐标是相对于新的坐标系统的。

除了旋转图形，rotate() 方法还可以用来旋转文本。下面是一个示例代码，演示如何在Canvas中绘制一个旋转的文本：

// www.javascriptcn.com code example
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    ctx.font = '20px Arial';
    ctx.fillStyle = 'black';
    ctx.fillText('Hello, World!', 50, 100);

    ctx.translate(100, 100);
    ctx.rotate(Math.PI / 4);
    ctx.fillText('Hello, World!', -50, 0);
</script>

在这段代码中，我们首先绘制了一个黑色的文本，然后通过translate() 方法将Canvas的坐标原点移到文本的中心位置，再通过rotate() 方法将Canvas旋转了45度，最后绘制了一个旋转后的文本。

通过上面的示例代码，我们可以看到rotate() 方法的强大之处，它为我们在Canvas中实现各种旋转效果提供了便利。希望本文对您有所帮助，谢谢阅读！