HTML canvas(画布)transform()方法

  • transform()方法定义和用法

    画布上的每个对象都有一个当前的变换矩阵。
    transform()方法替换当前的变换矩阵。它将当前变换矩阵与下面描述的矩阵相乘:
    a c e
    b d f
    0 0 1
    换句话说,transform()方法允许您缩放,旋转,移动和倾斜当前上下文。
    注意:转换只会影响调用transform()方法后生成的图形。 注意:transform()方法的行为与rotate(),scale(),translate()或transform()所做的其他转换相对。示例:如果已将图形设置为按比例缩放,并且transform()方法将图形缩放为2,则图形现在将缩放4。 提示:查看setTransform()方法,该方法与其他转换的行为不相关。

  • transform()方法浏览器支持

    Internet Explorer Chrome FireFox Safari Opera
    9.0(含)以上 支持 支持 支持 支持
  • transform()方法语法

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

  • transform()方法实例

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    
    ctx.fillStyle = "yellow";
    ctx.fillRect(0, 0, 250, 100)
    
    ctx.transform(1, 0.5, -0.5, 1, 30, 10);
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 250, 100);
    
    ctx.transform(1, 0.5, -0.5, 1, 30, 10);
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, 250, 100);
    
    尝试一下
  • transform()方法参数值

    参数 描述
    a 水平扩展
    b 水平倾斜
    c 垂直倾斜
    d 垂直扩展
    e 水平移动
    f 垂直移动
  • transform()方法相关页面

    HTML教程:HTML脚本

    HTML教程:HTML画布