HTML |画布 transform() 方法

transform() 方法用于替换当前的变换矩阵，即画布上的每个对象都有一个当前的变换矩阵。 transform() 方法用于将当前变换矩阵与下面描述的矩阵相乘：

a    c    e
b    d    f
0    0    1

它只是允许缩放、移动、倾斜和旋转当前上下文。
句法：

context.transform(a, b, c, d, e, f);

参数值：

• a 表示水平缩放
• b 表示水平偏斜
• c 表示垂直倾斜
• d 表示垂直缩放
• e 表示水平移动
• f 表示垂直移动

例子：

  

     
      GeeksforGeeks
  
    
      HTML canvas transform() method
  
    
    
  
    
        var gfg = document.getElementById("gfgCanvas");
        var context = gfg.getContext("2d");
  
        context.fillStyle = "green";
        context.fillRect(80, 80, 200, 100)
  
        context.transform(1, 0, 2, 2, 10, 10);
        context.fillStyle = "black";
        context.fillRect(20, 20, 20, 80);
    
  

  

输出：

支持的浏览器：

• 铬合金
• 火狐浏览器
• 浏览器 9.0
• 歌剧
• 苹果浏览器