HTML 画布 rotate() 方法

HTML canvas rotate() 方法用于将绘图旋转给定角度。请注意，旋转仅适用于旋转完成后制作的画布。

句法：

context.rotate(angle)

参数值：

• angle：以弧度为单位存储旋转角度。如果角度以度数的形式给出，则使用公式degree*Math.PI/180将其转换为弧度。

示例 1：

 
 
  
 
     
        HTML canvas rotate() Method
     
 
  
 

GeeksforGeeks
     
         
  
     
        var geeks = document.getElementById("GFG"); 
        var contex = geeks.getContext("2d");
        contex.strokeRect(100, 50, 150, 100); 
        contex.rotate(30 * Math.PI / 180);
        contex.strokeRect(100, 50, 150, 100);
     

 
  
                         

输出：

示例 2：

 
 
  
 
     
        HTML canvas rotate() Method
     
 
  
 

GeeksforGeeks
     
 
  
     
        var geeks = document.getElementById("GFG"); 
        var contex = geeks.getContext("2d"); 
        contex.rect(100, 100, 150, 100);//acctual rectangle
        contex.stroke(); 
          
        contex.rotate((-20) * Math.PI / 180);
        contex.rect(100, 100, 150, 100);//rotate rectangle
        contex.stroke();
     

 
  
                                      

输出：

支持的浏览器：

• 谷歌浏览器
• 互联网浏览器 9.0
• 火狐
• 苹果浏览器
• 歌剧