js canvas绘图绕中心点任意角度旋转_js标题绕半圆中心点运行角度-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42170906/article/details/80252152

本文介绍了一个使用HTML5 Canvas实现图片旋转的功能。通过获取用户输入的角度值，该示例能够动态地旋转并绘制指定的图片。文章包含完整的HTML、CSS及JavaScript代码，并详细展示了如何设置画布尺寸、清除背景、进行坐标系转换以及最终将图片绘制到画布上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <title>canvasTest</title>
</head>
<style type="text/css">
    .imgbox img {
        width: 100%
    }
    .canvasbox canvas {
        width: 100%
    }
</style>

<body>
<div class="imgbox"><img id="img" src="./img/aaa.png"></div>
<div>
    <input type="number" id="number" name="" placeholder="输入旋转角度">
    <button οnclick="drawImgToCanvas()">draw</button>
</div>
<div class="canvasbox">
    <canvas id="canvas"></canvas>
</div>
<script type="text/javascript">
  let drawImgToCanvas = () => {
    let rotate = document.getElementById('number').value * 1
    let canvas = document.getElementById('canvas')
    let context = canvas.getContext('2d')
    let img = new Image()
    img.src = './img/aaa.png'
    img.onload = () => {
      // corssOrigin must be set before the url
      img.setAttribute('crossOrigin', 'Anonymous')
      if (rotate < 0) {
        rotate = 360 + rotate
      }
      rotate = rotate % 360

      if (rotate > 45 && rotate < 135) { // 90 宽高颠倒
        canvas.width = img.height
        canvas.height = img.width
      } else if (rotate > 225 && rotate < 315) { // 270 宽高颠倒
        canvas.width = img.height
        canvas.height = img.width
      } else {
        canvas.width = img.width
        canvas.height = img.height
      }
      context.clearRect(0, 0, canvas.width, canvas.height)


      context.translate(canvas.width / 2, canvas.height / 2)
      context.rotate(rotate * Math.PI / 180)
      context.translate(-canvas.width / 2, -canvas.height / 2)
      context.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.height / 2)
      context.translate(canvas.width / 2, canvas.height / 2)
      context.rotate(-rotate * Math.PI / 180)
      context.translate(-canvas.width / 2, -canvas.height / 2)
      context.restore()
    }
  }
</script>
</body>
</html>

demo地址 https://xingyanhai.github.io/17-04-12/canvasRotate/canvasTest.html