canvas之伸缩变换

最新推荐文章于 2024-04-16 11:36:02 发布

最帅扫地僧

最新推荐文章于 2024-04-16 11:36:02 发布

阅读量322

点赞数

分类专栏： html js 文章标签： canvas html5

本文链接：https://blog.csdn.net/weixin_42259266/article/details/107774009

版权

js 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

html

17 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>缩放案例</title>
  <style>
    canvas {
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <canvas width="600" height="600" id="canvas"></canvas>
  <script>
    // 值会累加计算
    window.onload = function () {
      let canvas = document.querySelector('#canvas');
      if (!canvas.getContext) return;
      let ctx = canvas.getContext("2d");
      let rotateDeg = 0;
      let scaleStep = 0;
      let scale = 0;

      setInterval(() => {
        if (rotateDeg >= 360) {
          rotateDeg = 0;
        }
        rotateDeg += 10;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();
        ctx.translate(300, 300);
        if (scale === 20) {
          scaleStep = -1;
        } else if (scale === 0) {
          scaleStep = 1;
        }
        scale += scaleStep;
        ctx.scale(scale / 10, scale / 10);
        ctx.rotate(rotateDeg * Math.PI / 180);
        ctx.beginPath();
        ctx.fillRect(-100, -100, 200, 200);
        ctx.restore();
      }, 100);
      // translate多次调用，值会累加， rotate也是一样
      // ctx.translate(200, 200);
      // scale 参数1：横向的缩放因子  参数2：纵向的缩放因子
    }
  </script>
</body>

</html>

最帅扫地僧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas之伸缩变换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>缩放案例</title> <style> canvas { border: 1px solid
复制链接

扫一扫