html5中canvas.rotate函数使用transform实现rotate效果

最新推荐文章于 2021-12-21 15:19:12 发布

水星灭绝

最新推荐文章于 2021-12-21 15:19:12 发布

阅读量1k

点赞数

分类专栏： h5 前端

本文链接：https://blog.csdn.net/wulong710/article/details/108685274

版权

前端同时被 2 个专栏收录

137 篇文章

订阅专栏

121 篇文章

订阅专栏

这篇博客介绍了HTML5 Canvas中如何使用transform方法替代rotate函数来实现元素的旋转效果。内容详细阐述了canvas的rotate函数以左上角为原点进行旋转，并且参数是弧度而不是角度。同时，文章提供了使用transform实现旋转的代码示例及实际效果展示。

摘要由CSDN通过智能技术生成

参考：https://www.cnblogs.com/liugang-vip/p/5389915.html

canvas的rotate函数，以左上角为原点旋转，参数为弧度，不是角度。

用transform代替rotate公式

rotate转化成transform

rotate(a*Math.PI/180)

公式推导就不推了，直接拿过来了

 context.transform(cos(a),sin(a),-sin(a),cos(a),0,0)  （a为角度）

--> context.transform(Math.cos(a*Math.PI/180),Math.sin(a*Math.PI/180),-Math.sin(a*Math.PI/180),Math.cos(a*Math.PI/180),0,0)

代码：

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>脚本</title>
  <style>
    canvas {
      background-color: aqua;

      /* transform: rotate(30deg);
      -ms-transform: rotate(30deg);
      -webkit-transform: rotate(30deg);

      transform: skew(60deg,0deg);
      -ms-transform: skew(60deg,0deg);
      -webkit-transform: skew(60deg,0deg); */

      /* transform: translate(100px, 50px); */
      /* -ms-transform: translate(100px, 50px);
      -webkit-transform: translate(100px, 50px); */

    }

    div#ndiv {
      background-color: yellow;
      transform: rotate(60deg);
      -ms-transform: rotate(60deg);
      /* IE 9 */
      -webkit-transform: rotate(60deg);
      /* Safari and Chrome */
    }
  </style>
</head>

<body>
  <canvas ID="myCanvas" width="700" height="600">
    你的浏览器不支持
  </canvas>
  <!-- <div id="ndiv" width="50px" height="100px">你好，这是一个新的内容</div> -->

  <script type="text/javascript">
    var ctx;
    var i = 0;

    function draw() {
      var c = document.getElementById('myCanvas');
      var ctx = c.getContext("2d");


      for (n = 1; n <= 5; n++) {
        ctx.save();
        ctx.translate(100 * n, 100);

        txt = "";
        if (n == 1) {
          //function: transform(a,b,c,d,e,f);
          //参数：
          //      a : 水平缩放
          //      b : 水平倾斜
          //      c : 垂直倾斜
          //      d : 垂直缩放
          //      e : 水平移动
          //      f : 垂直移动
          //旋转30度
          var angle = 30;
          var color = 'red';
          var radian = angle / 180 * Math.PI;
          ctx.transform(1, Math.tan(radian), 0, 1, 0, 0);
          ctx.strokeStyle = color;       // 在原有配置基础上对颜色做改变
          ctx.fillStyle = color;
          txt = "skew x " + angle;
        } else if (n == 2) {
          var angle = 30;
          var radian = angle / 180 * Math.PI;
          ctx.transform(1, 0, Math.tan(radian), 1, 0, 0);

          var color = 'green';
          ctx.strokeStyle = color;       // 在原有配置基础上对颜色做改变
          ctx.fillStyle = color;
          txt = "skew y " + angle;
        } else if (n == 3) {
          var angle = 30;
          var radian = angle / 180 * Math.PI;
          ctx.transform(1, Math.tan(radian), Math.tan(radian), 1, 0, 0);

          var color = 'blue';
          ctx.strokeStyle = color;       // 在原有配置基础上对颜色做改变
          ctx.fillStyle = color;
          txt = "skew xy " + angle;
        } else if (n == 4) {
          var angle = 80;
          var radian = angle / 180 * Math.PI;
          ctx.transform(Math.cos(radian), Math.sin(radian), -Math.sin(radian), Math.cos(radian), 0, 0);

          var color = 'orange';
          ctx.strokeStyle = color;       // 在原有配置基础上对颜色做改变
          ctx.fillStyle = color;
          txt = "rotate angle " + angle;
        }

        ctx.strokeRect(0, 0, 80, 100);   // 使用默认设置绘制一个矩形
        ctx.font = "20px Arial";
        ctx.fillText("id:" + n + " " + txt, 5, 30);
        ctx.restore();
      }
    }

    draw();
      // timer = setInterval(function () {
      //   if (i < 6) {
      //     draw();
      //   }
      // }, 500)
    // draw();
  </script>



</body>

</html>

效果：