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

最新推荐文章于 2024-09-11 21:35:21 发布

水星灭绝

最新推荐文章于 2024-09-11 21:35:21 发布

阅读量997

点赞数

分类专栏： h5 前端

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

版权

这篇博客介绍了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);