canvas setTransform()

admin發表於2018-07-31
CanvasORM

畫布上的每個物件都擁有一個當前的變換矩陣。

此方法把當前的變換矩陣重置為單位矩陣，然後以相同的引數執行transform()。

也就是說允許縮放、旋轉、移動並傾斜當前的環境。

特別說明:該變換隻會影響setTransform()方法呼叫之後的繪圖。

語法結構: 

[JavaScript] 純文字檢視 複製程式碼
context.setTransform(a,b,c,d,e,f);

瀏覽器相容:

（1）.IE9+瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.火狐瀏覽器支援此屬性。

（5）.Opera瀏覽器支援此屬性。

（6）.Safari瀏覽器支援此屬性。

引數值:

引數 描述
a 水平縮放繪圖。
b 水平傾斜繪圖。
c 垂直傾斜繪圖。
d 垂直縮放繪圖。
e 水平移動繪圖。
f 垂直移動繪圖。

程式碼例項: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:300px;
  height:150px;
}
</style> 
<script>
window.onload=function(){
  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);
}
</script>
</head>
<body>
<canvas id="myCanvas">當前瀏覽器canvas標籤</canvas>
</body>
</html>

相關文章