canvas_8_变形

最新推荐文章于 2024-07-25 09:24:40 发布

熙哥_tito

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量36

点赞数

分类专栏： canvas 文章标签：前端

本BLOG上原创文章未经本人许可，不得用于商业用途。转载请注明出处，否则保留追究法律责任的权利。

本文链接：https://blog.csdn.net/weixin_49471755/article/details/131004804

版权

canvas 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

translate(x, y) 用来移动 canvas 的原点到指定的位置

rotate(angle) 旋转坐标轴它是顺时针方向的，以弧度为单位的值。

scale(x, y) 对形状，位图进行缩小或者放大。值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。

<body>
  <!-- 

    translate(x, y)  用来移动 canvas 的原点到指定的位置

    rotate(angle)   旋转坐标轴 它是顺时针方向的，以弧度为单位的值。

    scale(x, y)     对形状，位图进行缩小或者放大。  值比 1.0 小表示缩 小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。

   -->
  <canvas id="can1" width="500" height="400"></canvas>
  <canvas id="can2" width="500" height="400"></canvas>
  <canvas id="can3" width="500" height="400"></canvas>
  <script>
    (() => {
      let canvas = document.getElementById("can1")
      let ctx = canvas.getContext("2d")
      ctx.save(); //保存坐原点平移之前的状态
      ctx.translate(100, 100);
      ctx.strokeRect(0, 0, 100, 100);
      ctx.restore(); //恢复到最初状态
      ctx.translate(220, 220);
      ctx.fillRect(0, 0, 100, 100)
    })();

    (() => {
      let canvas = document.getElementById("can2")
      let ctx = canvas.getContext("2d")
      ctx.fillStyle = "blue"
      ctx.save()
      ctx.translate(100,100)
      ctx.rotate(Math.PI/180*45)
      ctx.fillStyle = "red"
      ctx.fillRect(0,0,100,100)

      ctx.restore()
      ctx.save()
      ctx.scale(2,1.5)
      ctx.fillRect(0,0,50,50)
      ctx.restore()
      
    })();

    (() =>{
      let canvas = document.getElementById('can3');
      if (!canvas.getContext) return;
      let ctx = canvas.getContext("2d");
      ctx.transform(1, 1, 0, 1, 0, 0);
      ctx.fillRect(0, 0, 100, 100);
    })()
  </script>
</body>

熙哥_tito

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas_8_变形

translate(x, y) 用来移动 canvas 的原点到指定的位置rotate(angle) 旋转坐标轴它是顺时针方向的，以弧度为单位的值。scale(x, y) 对形状，位图进行缩小或者放大。值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。
复制链接

扫一扫

专栏目录