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画布