HTML canvas(画布)setTransform()方法

• 

  setTransform()方法定义和用法

  画布上的每个对象都有一个当前的变换矩阵。
  setTransform()方法将当前变换重置为单位矩阵，然后 使用相同的参数运行transform()。
  换句话说，setTransform()方法允许您缩放，旋转，移动和倾斜当前上下文。
  注意：转换只会影响调用setTransform方法后生成的图形。

• 

  setTransform()方法浏览器支持

  Internet Explorer	Chrome	FireFox	Safari	Opera
  9.0（含）以上	支持	支持	支持	支持

• 

  setTransform()方法语法

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

• 

  setTransform()方法实例

  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  
  ctx.fillStyle="yellow";
  ctx.fillRect(0,0,250,100)
  
  ctx.setTransform(1,0.5,-0.5,1,30,10);
  ctx.fillStyle="red";
  ctx.fillRect(0,0,250,100);
  
  ctx.setTransform(1,0.5,-0.5,1,30,10);
  ctx.fillStyle="blue";
  ctx.fillRect(0,0,250,100);
  

  尝试一下
• 

  setTransform()方法参数值

  参数	描述
  a	水平扩展
  b	水平倾斜
  c	垂直倾斜
  d	垂直扩展
  e	水平移动
  f	垂直移动

• 

  setTransform()方法相关页面

  HTML教程：HTML脚本

  HTML教程：HTML画布