Latest web development tutorials

HTML canvas rotate() 方法

HTML canvas 參考手冊 HTML canvas參考手冊

實例

將矩形旋轉20 度:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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

嘗試一下»

瀏覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome 和Safari 支持rotate() 方法。

注意: Internet Explorer 8及之前的版本不支持<canvas>元素。


定義和用法

rotate() 方法旋轉當前的繪圖。

注意:旋轉只會影響到旋轉完成後的繪圖。

JavaScript 語法: context.rotate( angle );

參數值

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

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


HTML canvas 參考手冊 HTML canvas參考手冊