canvas rotate() 中心旋转的实际运用

Ugalaxy

已于 2022-07-28 22:19:07 修改

阅读量2k

点赞数 3

分类专栏： HTML 文章标签：前端 javascript html

于 2022-07-28 22:16:02 首次发布

本文链接：https://blog.csdn.net/ugalaxy/article/details/126044921

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在开发中遇到了一个问题在画canvas的时候需要对画布中画出来的特定图片进行中心旋转，直接旋转后图片就转走了，还是需要调整位置，变成中心旋转。

平时用到canvas旋转的使用并不多，这个问题卡了好久，最后终于好了，放个dome ,需要的可以试试。

蓝色的是画布也可以直接是背景图在背景图上画

需要一张图片 a.jpg 放在html同级就行

这个demo我修改了很多次，做了些测试，可能会有些乱

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #canvas {
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>
  </body>
</html>

<script>
  function rotate(context, rotation, canvasWidth, canvasHeight) {
    // Move registration point to the center of the canvas
    let w = canvasWidth / 2
    let h = canvasHeight / 2
    context.translate(w + xx,  h + yy);
    // Rotate 1 degree
    context.rotate((rotation * Math.PI) / 180);
    // Move registration point back to the top left corner of canvas
    context.translate(-w-xx, -h-yy);
  }
   var xx = 20;  //偏移
   var yy = 20    //偏移
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
//   const image = new Image();

  const image1 = new Image();
  image1.onload = function () {
    rotate(ctx, 45, 100, 100);
    ctx.drawImage(this, xx, yy, 100, 100);
  };
  image1.src = "a.jpg";
</script>