HTML canvas rotate() 方法

定义和用法

rotate() 旋转当前绘图的方法。

实例

将矩形旋转20度:

您的浏览器不支持HTML5 canvas标签。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(50,20,100,50);

Try It Yourself

Syntax

context.rotate(angle);

Parameter Value

Parameter Description
angle

Rotation angle, in radians.

To convert degrees to radians, please use the formula degrees * Math.PI / 180 for calculation.

Example: To rotate 5 degrees, you can specify the following formula: 5 * Math.PI / 180.

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.