canvas transform()

admin發表於2018-05-23
CanvasORM
此方法可以為當前圖形新增一個新的變換矩陣。

平移、旋轉和縮放內部都是通過transform()方法實現，只是更直觀。

語法結構：

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

關於引數的具體用法，下面會分佈做一下介紹。

任何圖形都有一個預設矩陣，具體如下：

[JavaScript] 純文字檢視 複製程式碼
(1,0,0,1,0,0)

這六個數字就對應著transform()方法的六個引數。

預設狀態下，圖形縮放比例是1，那麼是不是引數a和引數d是負責縮放的。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
  margin:50px;
}
</style>
<script>
window.onload=function(){
  var cvs = document.getElementById("canvas");
  var ctx = cvs.getContext("2d");
  ctx.beginPath();
  ctx.transform(2, 0, 0, 2, 0, 0);
  ctx.rect(50, 50, 100, 100);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
</body>
</html>

由上面的程式碼可以看出引數a和引數d確實是負責縮放的。

那麼哪些引數負責位移的，答案是最後兩個引數，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
  margin:50px;
}
</style>
<script>
window.onload=function(){
  var cvs = document.getElementById("canvas");
  var ctx = cvs.getContext("2d");
  ctx.transform(1, 0, 0, 1, 50, 50);
  ctx.fillStyle = "green";
  ctx.rect(0, 0, 100, 100);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>

經過程式碼測試確實如此，e和f兩個引數負責位移的控制。

那麼是不是說明b和c兩個引數是用來控制旋轉的，其實並非如此，旋轉需要a、b、c和d四個引數共同配合實現。

b和c兩個引數是用來實現斜切的，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<canvas id="canvas" width="500" height="550"></canvas>
<script>
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
var angle =Math.PI / 180
ctx.translate(180, 120);
ctx.transform(1, Math.tan(30 * Math.PI / 180), 0, 1, 50, 50);
ctx.fillRect(80, 20, 100, 50);
</script>
</body>
</html>

上面的程式碼實現了x軸方位的30度角的斜切效果，引數c是控制y軸方位的斜切。

引數比較特別，這是固定的格式，我們記住就可以了。再來看一些使用transform()方法實現一個完整的旋轉效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
  margin:50px;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="550"></canvas>
<script>
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
var angle = Math.PI / 180;
ctx.translate(180, 120);
ctx.transform(Math.cos(30 * angle), Math.sin(30 * angle), -Math.sin(30 * angle), Math.cos(30 * angle), 0, 0)
ctx.fillRect(80, 20, 100, 50);
</script>
</body>
</html>

上面的程式碼實現了旋轉30度的功能，a、b、c和d四個引數的格式也是固定的。

如果我們要放大2倍，並旋轉30度應該如何設定呢，是不是如下程式碼:

[JavaScript] 純文字檢視 複製程式碼
transform(2*Math.cos(30 * angle), Math.sin(30 * angle), -Math.sin(30 * angle), 2*Math.cos(30 * angle), 0, 0)

然而事實並非如此，b和c兩個引數也需要乘以2才行，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
transform(2 * Math.cos(30 * angle),2*Math.sin(30 * angle), -2*Math.sin(30 * angle), 2*Math.cos(30 * angle),0,0)

相關文章