canvas rotate()画布的旋转详解

最新推荐文章于 2024-06-03 15:08:24 发布

大叶豌豆

最新推荐文章于 2024-06-03 15:08:24 发布

阅读量4.9w

点赞数 23

分类专栏： HTML5 文章标签： canvas html5 rotate 画布的旋转

本文链接：https://blog.csdn.net/dayewandou/article/details/78235992

版权

HTML5 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

刚才还是风和日丽的天，这没一会会就乌云密布了，雨呀，眼瞅就下来了呢，一场秋雨一场寒，感觉懂得要穿棉袄了的节奏
10月1号之前，还是T恤呢，10月放完国庆节和中秋节以后就开始毛衣、毛衫、毛外套了，这真的是8天过了一个季节呀~~~
大概北方的秋天都是这么快的吧
继续来看看canvas的rotate()方法
rotate()旋转当前的绘图。
语法：context.rotate(angle)
参数：angle旋转角度，以弧度计（n*Math.PI）
举例：假如想要旋转60度，可以context.rotate(Math.PI/3)进行表示；

乡亲们注意啦？开会啦？
旋转的中心是在整个画布的左上角（0,0），旋转的正方向是顺时针，旋转的反方向是逆时针，
重点：canvas中的rotate方法是绕画布左上角（0,0）进行旋转的，而且会受到translate的影响

实例效果开始：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas width="800" height="600"></canvas>
    <script>
        var canvas=document.querySelector('canvas');
        var ctx=canvas.getContext('2d');
        ctx.rotate(Math.PI/6);//正方向旋转30度
        ctx.fillRect(100,100,300,200);
    </script>
</body>
</html>

显示效果：
这里写图片描述

逆方向旋转30度怎么写？

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas width="800" height="600"></canvas>
    <script>
        var canvas=document.querySelector('canvas');
        var ctx=canvas.getContext('2d');
        ctx.rotate(-Math.PI/6);
        ctx.fillRect(100,100,300,200);
    </script>
</body>
</html>

显示效果：
这里写图片描述

既然知道了旋转，那我们来做一个好玩的，燥起来，燥起来….. 这里写图片描述
需求：做一个旋转的矩形，并且以矩形的中心为原点，围绕原点旋转

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas width="800" height="600"></canvas>
    <script>
        var canvas=document.querySelector('canvas');
        var ctx=canvas.getContext('2d');
        //3.把旋转的矩形平移进画布
        ctx.translate(300,300);
        var timer=setInterval(function(){
            //4.清除的点需要注意         ctx.clearRect(-151,-101,canvas.width,canvas.height);
            //1.定义一个旋转的方法,确定每次时间间隔中要旋转多少弧度
            ctx.rotate(0.01*Math.PI);
            //2.绘制一个矩形，因为需求要求矩形以中心为轴进行旋转，但是canvas中rotate只能以画布左上角为轴，进行旋转
            //因此，只要使矩形的中心和画布的左上角重合就可以了(起点的横纵坐标为矩形宽高的一半)
            ctx.strokeRect(-150,-100,300,200);
        },5);
    </script>
</body>
</html>

显示效果图：
这里写图片描述

既然是持续旋转马上想到的肯定就是setInterval，每间隔5毫秒执行一次函数
在想到的就是用到canvas中的rotate()方法，让矩形旋转一定的角度
接下来遇到难点了，就是rotate旋转都是以画布的左上角为原点进行旋转的，那想让矩形围绕矩形的中心点旋转需要怎么办呢？
是不是可以把矩形的原点移到画布的原点，然后进行旋转呢？想想的效果如下图：
这里写图片描述
那么这个问题解决了，接下来就是，人家要求矩形是在画布的内部，怎样让图像移到画布的内部呢？就用到canvas translate()方法进行平移，详情可点击链接

现在移入到了canvas的内部了，就万事大吉了？
no no no 可能噩梦才刚刚开始，又出现了个bug，效果如图：
这里写图片描述

我去哪里是噩梦？感觉这个画面还挺炫的有没有？
不过它终究不是客户想要的效果，问题来了，为什么会发生重复叠加的效果？ok,没清除canvas中每次旋转的效果，所以导致图片的效果累加起来，那就需要用clearRect进行清除，那清除的其实坐标在哪里呢？这可是重点，就是矩形起点的横纵坐标+法线外面的1px虚影，所以clearRect(-151,-101,canvas.width,canvas.height);

大功告成！！！撒花撒花！！这里写图片描述

大叶豌豆

关注

23
点赞
踩
45

收藏

觉得还不错? 一键收藏
6
评论
canvas rotate()画布的旋转详解

刚才还是风和日丽的天，这没一会会就乌云密布了，雨呀，眼瞅就下来了呢，一场秋雨一场寒，感觉懂得要穿棉袄了的节奏 10月1号之前，还是T恤呢，10月放完国庆节和中秋节以后就开始毛衣、毛衫、毛外套了，这真的是8天过了一个季节呀~~~ 大概北方的秋天都是这么快的吧继续来看看canvas的rotate()方法 rotate()旋转当前的绘图。语法：context.rotate(angle) 参
复制链接

扫一扫