学习Canvas基础-位移、缩放、旋转

一、 translate()

方法对当前网格添加平移变换的方法
ctx.translate(x, y)
translate() 方法，将 canvas 按原始 x 点的水平方向、原始的 y 点垂直方向进行平移变换
参数
x——水平方向的移动距离。
y——垂直方向的移动距离。
事例

<!-- 兼容性写法，在低版本时标签内部的文字才会显示 -->
  <canvas id="cont" width="500px" height="400px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
  <script>
    /** @type {HTMLCanvasElement} */
    //  获取canvas画布
    const canvas=document.querySelector('#cont')
    // 获取画布的应用上下文
    const ctx =canvas.getContext('2d')
    // 标记画布原点
    ctx.beginPath()
    ctx.fillStyle = 'black'
    ctx.arc(0, 0, 10, 0, Math.PI * 2)
    ctx.fill()
    ctx.closePath()
    
    ctx.beginPath()
    // translate(X,Y),X水平方向的移动距离、Y垂直方向的移动距离
    ctx.translate(250, 200)
    ctx.fillStyle = 'red'
    ctx.arc(0, 0, 10, 0, Math.PI * 2)
    ctx.fill()
    ctx.closePath()
    // 由此证明translate移动API是移动的画布位置原点实现位移。
  </script>

二、scale()

根据 x 水平方向和 y 垂直方向，为 canvas 单位添加缩放变换的方法。
void ctx.scale(x, y)
默认的，在 canvas 中一个单位实际上就是一个像素。例如，如果我们将 0.5 作为缩放因子，最终的单位会变成 0.5 像素，并且形状的尺寸会变成原来的一半。相似的方式，我们将 2.0 作为缩放因子，将会增大单位尺寸变成两个像素。形状的尺寸将会变成原来的两倍。
参数
x——水平方向的缩放因子
y——垂直方向的缩放因子
事例

<!-- 兼容性写法，在低版本时标签内部的文字才会显示 -->
  <canvas id="cont" width="500px" height="400px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
  <script>
    /** @type {HTMLCanvasElement} */
    //  获取canvas画布
    const canvas = document.querySelector('#cont')
    // 获取画布的应用上下文
    const ctx = canvas.getContext('2d')
    // 绘制矩形
    ctx.beginPath()
    ctx.fillStyle = 'red'
    ctx.fillRect(0, 0, 100, 50)
    ctx.closePath()
    // 绘制矩形
    ctx.beginPath()

      // translate(X,Y),X水平方向的移动距离、Y垂直方向的移动距离
    ctx.translate(250,200)
    // scale(X,Y),X代表水平方向缩放比例，Y代表垂直方向缩放比例，
    ctx.scale(2,2)
    ctx.fillStyle = 'blue'
    ctx.fillRect(0, 0, 100, 50)
    ctx.closePath()
  </script>

rotate()

在变换矩阵中增加旋转的方法。角度变量表示一个顺时针旋转角度并且用弧度表示。
ctx.rotate(angle)
参数
angle
顺时针旋转的弧度。如果你想通过角度值计算，可以使用公式： degree * Math.PI / 180 。
旋转中心点一直是 canvas 的起始点。如果想改变中心点，我们可以通过 translate() 方法移动 canvas。

 <!-- 兼容性写法，在低版本时标签内部的文字才会显示 -->
  <canvas id="cont" width="500px" height="400px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
  <script>
    /** @type {HTMLCanvasElement} */
    //  获取canvas画布
    const canvas = document.querySelector('#cont')
    // 获取画布的应用上下文
    const ctx = canvas.getContext('2d')
    // 标记画布原点
    ctx.beginPath()
    ctx.fillStyle = 'black'
    ctx.arc(0, 0, 10, 0, Math.PI * 2)
    ctx.fill()
    ctx.closePath()
    // translate(X,Y),X水平方向的移动距离、Y垂直方向的移动距离
    ctx.translate(250, 200)
    // 绘制一个坐标系
    ctx.beginPath()
    ctx.strokeStyle = 'red'
    ctx.moveTo(-100, 0)
    ctx.lineTo(200, 0)
    ctx.lineTo(190, -10)
    ctx.moveTo(200, 0)
    ctx.lineTo(190, 10)
    ctx.moveTo(0, -100)
    ctx.lineTo(0, 200) 
    ctx.lineTo(-10, 190)
    ctx.moveTo(0, 200)
    ctx.lineTo(10, 190)
    ctx.stroke()
    ctx.closePath()

    // rotate(顺时针旋转的弧度)
    ctx.rotate(Math.PI / 4)

    // 绘制一个坐标系
    ctx.beginPath()
    ctx.moveTo(-100, 0)
    ctx.lineTo(200, 0)
    ctx.lineTo(190, -10)
    ctx.moveTo(200, 0)
    ctx.lineTo(190, 10)
    ctx.strokeStyle = 'black'
    ctx.moveTo(0, -100)
    ctx.lineTo(0, 200)
    ctx.lineTo(-10, 190)
    ctx.moveTo(0, 200)
    ctx.lineTo(10, 190)
    ctx.stroke()
    ctx.closePath()
  </script>

四、总结

rotate() scale() translate() 这三个方法都是对canvas坐标系进行缩放、移动、旋转而展现效果的。