js canvas 旋转90度的整数倍

最新推荐文章于 2024-06-27 16:39:50 发布

阿豪boy

最新推荐文章于 2024-06-27 16:39:50 发布

阅读量131

点赞数

文章标签： js canvas css opencv css3

本文链接：https://blog.csdn.net/qq_35516360/article/details/122065158

版权

原文链接: js canvas 旋转90度的整数倍

上一篇: js 使用canvas 旋转图片

下一篇: dell g7 重装win10

为了避免出现黑框

效果如下

根据不同的方向，设置宽高和画笔位置等

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>Title</title>
  <style>
    .img {
      width: 300px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
<img class="img" id="source" src="./t.jpg" alt=""/>
<canvas class="img" id="rotationCanvas"></canvas>
<img class="img" id="target" src="./t.jpg" alt=""/>

<button onclick="rotation()">旋转</button>
<script>
  let degree = 0;
  const sourceImg = document.getElementById('source');
  const targetImg = document.getElementById('target');

  const rotationCanvas = document.getElementById('rotationCanvas');

  function getSize(url) {
    return new Promise((resolve) => {
      let img = document.createElement('img');
      img.onload = () => {
        resolve({
          width: img.width,
          height: img.height,
        });
      };
      img.src = url;
    });
  }

  async function rotation() {
    let d = (degree * Math.PI) / 180;
    console.log(d);
    let image = sourceImg;
    let size = await getSize(sourceImg.src);
    console.log('size', size);
    const canvasWidth = size.width;
    const canvasHeight = size.height;
    // 旋转方向
    let direction = (degree / 90) % 4
    let surfaceContext = rotationCanvas.getContext('2d');
    if (direction === 0) {
      rotationCanvas.width = canvasWidth;
      rotationCanvas.height = canvasHeight;
      surfaceContext.clearRect(0, 0,  rotationCanvas.width, rotationCanvas.height);
      surfaceContext.save();
      surfaceContext.drawImage(image, 0, 0);
      surfaceContext.restore();
    } else if (direction === 1) {
      rotationCanvas.width = canvasHeight;
      rotationCanvas.height = canvasWidth;
      surfaceContext.clearRect(0, 0, rotationCanvas.width, rotationCanvas.height);
      surfaceContext.save();
      surfaceContext.translate(rotationCanvas.width  * 0.5, rotationCanvas.height * 0.5);
      surfaceContext.rotate(d);
      surfaceContext.drawImage(image, -rotationCanvas.height / 2, -rotationCanvas.width  / 2);
      surfaceContext.restore();
    } else if (direction === 2) {
      rotationCanvas.width = canvasWidth;
      rotationCanvas.height = canvasHeight;
      surfaceContext.clearRect(0, 0, rotationCanvas.width, rotationCanvas.height);
      surfaceContext.save();
      surfaceContext.translate(rotationCanvas.width * 0.5, rotationCanvas.height * 0.5);
      surfaceContext.rotate(d);
      surfaceContext.drawImage(image, -rotationCanvas.width / 2, -rotationCanvas.height / 2);
      surfaceContext.restore();
    } else if (direction === 3) {
      rotationCanvas.width = canvasHeight;
      rotationCanvas.height = canvasWidth;
      surfaceContext.clearRect(0, 0, rotationCanvas.width, rotationCanvas.height);
      surfaceContext.save();
      surfaceContext.translate(rotationCanvas.width * 0.5, rotationCanvas.height * 0.5);
      surfaceContext.rotate(d);
      surfaceContext.drawImage(image, -rotationCanvas.height / 2, - rotationCanvas.width / 2);
      surfaceContext.restore();
    }

    // surfaceContext.scale(.5, .5)
    targetImg.src = rotationCanvas.toDataURL();

    degree += 90;
  }

  rotation();
</script>
</body>
</html>