位移
画笔.translate(x,y): x:水平移动距离； y:垂直移动距离
注意这里移动的是坐标
eg：
<!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 = "canvas1"
width="600"
height="600"
style="background: lightgray"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
var ctx = canvas1.getContext("2d")
ctx.translate(100, 100)
ctx.fillRect(0,0,100,100)
</script>
</body>
</html>
放大
画笔.scale(x，y) ：x水平放大倍数，y垂直放大倍数。
注意这里拉伸的的也是坐标系
旋转
画笔.rotate(旋转角度) ：旋转角度可正可负
注意这里旋转的的也是坐标系
eg：
<!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 = "canvas1"
width="600"
height="600"
style="background: lightgray"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
var ctx = canvas1.getContext("2d")
// 平移
ctx.translate(300, 300)
// 放大
// ctx.scale(5,1)
// 旋转
ctx.rotate(Math.PI/4)
ctx.fillRect(-250,-50,500,100)
</script>
</body>
</html>
transform
画笔.transform（a，b，c，d，e，f）
a：水平方向的缩放
b：竖直方向的斜偏移量
c：水平方向的斜偏移量
d：竖直方向的缩放
e：水平方向的移动
f：竖直方向的移动
eg：旋转45度，并且x轴移动100像素，y轴移动100像素
<!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 = 600
height=600width="600"
height="600"
style="background: lightgray"
>
</canvas>
<script>
var c1 = document.getElementById("canvas")
var ctx = c1.getContext("2d")
// 水平移动100像素，竖直移动100像素
// ctx.transform(1,0, 0, 1,100,100)
// 顺时针旋转45度(旋转后的图像在原坐标的位置来确定前四个参数的大小)
// (1,0)旋转45度后再原坐标的位置是（1/sqrt(2),1/sqrt(2)）
ctx.transform(1/Math.sqrt(2),1/Math.sqrt(2),-1/Math.sqrt(2),1/Math.sqrt(2),100,100)
ctx.fillRect(0,0,500,50)
</script>
</body>
</html>
