canvas.translate詳細解析

一、canvas.translate的作用

canvas.translate() 方法用於移動canvas原點到指定的坐標位置。

在canvas中，默認情況下原點在canvas左上角，即坐標軸x軸和y軸的交點處。而canvas.translate() 方法可以將原點移動到指定的坐標位置，並將所有的圖形、文字等繪製操作都相對於新的原點進行。

//代碼示例：
var ctx = document.getElementById("myCanvas").getContext("2d");
ctx.translate(100, 100); //坐標軸移動到(100,100)處
ctx.fillRect(0,0,50,50); //相對於(100,100)處繪製矩形

二、canvas.translate的參數

canvas.translate() 方法接受兩個參數，分別是x軸方向上的偏移量和y軸方向上的偏移量。

在圖形繪製時，如果需要對圖形位置進行調整，可以使用這兩個參數來實現。同時，這兩個參數也可以用於實現如平移、旋轉、縮放等一系列的動畫效果。

//代碼示例：
var ctx = document.getElementById("myCanvas").getContext("2d");
ctx.translate(100, 100); //坐標軸移動到(100,100)處
ctx.fillRect(0,0,50,50); //相對於(100,100)處繪製矩形

ctx.translate(50, 50); //再次移動坐標軸
ctx.fillRect(0,0,50,50); //相對於(150,150)處繪製矩形

三、canvas.translate對圖形繪製的影響

canvas.translate() 方法對圖形繪製有着直接的影響，包括位移、旋轉、縮放等效果。

1. 位移效果

使用canvas.translate() 方法可以實現圖形位置的平移，從而實現簡單的動畫效果。

//代碼示例：
var ctx = document.getElementById("myCanvas").getContext("2d");
ctx.fillRect(10,10,50,50); //繪製紅色矩形
ctx.translate(50, 50); //將坐標軸向右移動50，向下移動50
ctx.fillRect(10,10,50,50); //相對於(60,60)處繪製藍色矩形

2. 旋轉效果

使用canvas.translate() 方法以及canvas.rotate() 方法可以實現圖形的旋轉效果。

//代碼示例：
var ctx = document.getElementById("myCanvas").getContext("2d");
ctx.translate(100, 100); //將坐標軸移動到(100,100)處
ctx.rotate(Math.PI/4); //將坐標軸順時針旋轉45度
ctx.fillRect(0,0,50,50); //相對於旋轉後的坐標軸上繪製矩形

3. 縮放效果

使用canvas.translate() 方法以及canvas.scale() 方法可以實現圖形的縮放效果。

//代碼示例：
var ctx = document.getElementById("myCanvas").getContext("2d");
ctx.scale(2, 2); //將圖形的橫縱坐標都縮放2倍
ctx.translate(50, 50); //將坐標軸向右移動50，向下移動50
ctx.fillRect(10,10,50,50); //相對於(110,110)處繪製矩形

四、canvas.translate的注意事項

在使用canvas.translate() 方法時需要注意以下幾點：

1. canvas.translate() 方法會對之前的狀態進行修改

可以使用canvas.save() 方法首先保存當前的狀態，然後在操作完成後使用canvas.restore() 恢復原狀態。

//代碼示例：
var ctx = document.getElementById("myCanvas").getContext("2d");
ctx.save(); //保存當前狀態
ctx.translate(100, 100); //將坐標軸移動到(100,100)處
ctx.fillRect(0,0,50,50); //相對於(100,100)處繪製矩形
ctx.restore(); //恢復原狀態
ctx.fillRect(0,0,50,50); //繪製矩形

2. canvas.translate() 方法相對於連續的平移

可以使用多次canvas.translate() 方法實現對圖形的連續平移。

//代碼示例：
var ctx = document.getElementById("myCanvas").getContext("2d");
ctx.translate(100, 100); //將坐標軸移動到(100,100)處
ctx.fillRect(0,0,50,50); //相對於(100,100)處繪製矩形

ctx.translate(50, 50); //再次移動坐標軸向右移動50，向下移動50
ctx.fillRect(0,0,50,50); //相對於(150,150)處繪製矩形

3. canvas.translate() 方法可以用於繪製複雜的圖形

使用canvas.translate() 方法可以實現繪製複雜的圖形，例如複雜的有機形態。

//代碼示例：
var ctx = document.getElementById("myCanvas").getContext("2d");
ctx.translate(100, 100); //將坐標軸移動到(100,100)處
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(50, 0);
ctx.lineTo(50, 50);
ctx.lineTo(0, 50);
ctx.closePath();
ctx.stroke();
ctx.translate(100, 0); //在原來的基礎上向右移動100
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(50, 0);
ctx.lineTo(50, 50);
ctx.lineTo(0, 50);
ctx.closePath();
ctx.fill();