HTML canvas 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表示垂直移动

例：

<!DOCTYPE html> 
<html> 
  
<body> 
    <h3 style="color:green">  
      GeeksforGeeks 
  </h3> 
    <h3 style="color:green"> 
      HTML canvas transform() method 
  </h3> 
    <canvas id="gfgCanvas"
            width="400" 
            height="300" 
            style="border:2px solid ;"> 
    </canvas> 
  
    <script> 
        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); 
    </script> 
  
</body> 
  
</html>

输出：

支持的浏览器：

chrome
火狐浏览器
Internet Explorer 9.0
Opera
苹果浏览器

相关用法

注：本文由纯净天空筛选整理自shubham_singh大神的英文原创作品 HTML | canvas transform() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。