Latest web development tutorials

HTML canvas rotate () method

Canvas Object Reference Canvas object

Examples

Rotate the rectangle 20 degrees:

YourbrowserdoesnotsupporttheHTML5canvastag.

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"

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome and Safari support rotate () method.

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


Definition and Usage

rotate () method to rotate the current drawing.

Note: The rotation will only affect the drawing after the completion of the rotation.

JavaScript syntax: context .rotate (angle);

Parameter Value

参数 描述
angle 旋转角度,以弧度计。

如需将角度转换为弧度,请使用degrees*Math.PI/180 公式进行计算。
实例:如需旋转 5 度,可规定下面的公式:5*Math.PI/180。


Canvas Object Reference Canvas object