平移操作

在canvas中，我们可以使用translate()方法来平移图形。平移不会改变图形的大小和形状。

语法：

cxt.translate(x,y)

x,y分别表示在x轴和y轴方向移动的距离，单位为px。

预备代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id = "canvas" width = "300" height = "300" style = "border: 1px dashed gray;"></canvas>
</body>

<script>
    window.onload = function() {
        //写逻辑
    }
</script>
</html>

效果图如下：

let canvas = document.getElementById('canvas');
let cxt = canvas.getContext('2d');

cxt.fillStyle = "orange";
cxt.fillRect(50,50,50,60);
        
cxt.translate(30,30);
cxt.fillRect(50,50,50,60);   // 重绘

效果图如下：

默认情况下，canvas会把所有绘制的图形都保存下来，如果不想保存，可以使用clearRect()方法来清空整个canvas。

let canvas = document.getElementById('canvas');
let cxt = canvas.getContext('2d');

cxt.fillStyle = "orange";
cxt.fillRect(50,50,50,60);
        
setTimeout(function(){
    cxt.clearRect(0,0,canvas.width,canvas.height);
    cxt.translate(30,30);
    cxt.fillStyle = "orange";
    cxt.fillRect(50,50,50,60);
},1000);

效果图如下：

图形缩放

在canvas中，我们可以使用scale()方法来缩放图形。

语法：

cxt.scale(x,y)

x,y分别表示图形在x轴方向或者y轴方向的缩放倍数。

let canvas = document.getElementById('canvas');
let cxt = canvas.getContext('2d');

cxt.fillStyle = "orange";
cxt.fillRect(50,50,50,60);

cxt.scale(2,2);
cxt.fillRect(50,50,50,60);

效果图如下：

不过scale()方法有一些副作用，如下：

左上角坐标。
宽度或者高度
线条宽度

图形旋转

在canvas中，我们可以使用rotate()方法来旋转图形。

语法：

cxt.rotate(angle)

参数angle表示图形旋转的角度，角度用弧度来表示，取值为 -Math.PI * 2 ~ Math.PI * 2。当angle < 0时，图形顺时针旋转；当angle > 0时，图形逆时针旋转。

cxt.fillStyle = "orange";
cxt.fillRect(50,50,20,30);

cxt.rotate( 30 * Math.PI / 180 );
cxt.fillRect(50,50,20,30);

默认情况下，rotate()方法的旋转中心就是坐标原点(0,0)。如果想要以(x,y)为旋转中心，可以先使用translate(x,y)，再使用rotate()方法。

let canvas = document.getElementById('canvas');
let cxt = canvas.getContext('2d');

cxt.beginPath();
cxt.arc(125,125,25,0,360 * Math.PI / 180, true);
cxt.closePath();
cxt.lineWidth = 5;
cxt.strokeStyle = "rgb(203, 203, 203)";
cxt.stroke();

cxt.clip();

let image = new Image();
image.src = "./head.jpg";
image.onload = function(){
   cxt.drawImage(image,100,100,50,50);
   setInterval(() => {
    cxt.clearRect(0,0,canvas.width,canvas.height);
    
    cxt.translate(125,125);   // 125 = 100 + 50 / 2
    cxt.rotate(10 * Math.PI / 180);
    cxt.translate(-125,-125);  // 取上面的负值是为了移动回原来的位置
    cxt.drawImage(image,100,100,50,50);
   }, 100);
}

效果图如下：

封面制作网站 ColorFu
gif制作软件ScreenToGif - Record your screen, edit and save as a gif, video or other formats

文章内容参考莫振杰著《HTML5 CANVAS开发详解》，感兴趣的同学可以阅读一下这本书，如有错误，欢迎指正！！

canvas学习--变形操作

平移操作

图形缩放

图形旋转