HTML5 Canvas 开发绘图方法整理【九、Canvas旋转、缩放】

最新推荐文章于 2024-03-05 16:45:11 发布

freedom_文

最新推荐文章于 2024-03-05 16:45:11 发布

阅读量2.8k

点赞数

分类专栏： javascript canvas

本文链接：https://blog.csdn.net/freedomVenly/article/details/79333028

版权

javascript 同时被 2 个专栏收录

49 篇文章 1 订阅

订阅专栏

canvas

22 篇文章 1 订阅

订阅专栏

rotate() 旋转当前绘图　　（旋转）
语法：
ctx.rotate 需要注意的是它默认旋转的原点并不是以之前绘制的图形某一点为原点而是以Canvas 画布 x轴坐标0 y轴坐标0 的位置为原点的;
可以看下示例代码

        ctx.fillStyle="#27A5FF";
        ctx.fillRect(50,50,100,100);

        btn.onclick=function () {
            ctx.rotate(15 * Math.PI/180);   //旋转15度
            ctx.strokeStyle="#FF2E98";
            ctx.strokeRect(50,50,100,100);
        };

效果图：
这里写图片描述

当然，它有默认远点，也可手动控制它的远点位置：

    //手动改变原点中心

        ctx.translate(150,150); //我的Canvas 画布是300 * 300的 这次将旋转的原点设在中间的位置
        ctx.rotate(45 * Math.PI/180);   //旋转15度
        ctx.strokeStyle="#FF2E98";
        ctx.strokeRect(0,0,100,100);

效果图：

这里写图片描述

要是还有点迷惑的童鞋们可以拉到底部，做了一个小动画的效果，应该可以看清楚的。

再来说下缩放的API:
scale() 缩放当前绘图至更大或更小　（缩放）
语法：scale(x, y) X轴缩放的倍数 y轴缩放的倍数
ctx.scale() 不仅改变图形的大小、还有坐标位置、线条粗细等，使用时需谨慎；

        ctx.fillStyle="#27A5FF";
        ctx.fillRect(50,50,100,100);

        ctx.scale(0.5,2);   //X轴设为之前的0.5倍  y轴设为之前的2倍
        ctx.strokeStyle="#FF2E98";
        ctx.strokeRect(50,50,100,100);

效果图：
这里写图片描述

关于转换的原点，作了一个小动画，全篇代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rotate</title>
</head>
<body>


<div style="text-align: center;">
    <br><br><br><br><br><br>

    <canvas id="seventhC" width="300" height="300" style="border: 1px solid #fff123"></canvas>

</div>

<script>
    window.onload=function () {
        let cans = document.getElementById("seventhC");
        let ctx = cans.getContext("2d");

        ctx.strokeStyle="#FF2E98";

        let c=0;
        let t=setInterval(function () {
            c++;
//            ctx.clearRect(0,0,300,300);  //可选择是否叠加绘制
            ctx.save();
            ctx.translate(150,150);
            ctx.rotate(c * Math.PI/180);
            ctx.strokeRect(0,0,100,100);
            ctx.restore();

            stop();
        },20);

       function stop() {
           if (c>360){
               clearInterval(t)
           }
       }


    }
</script>

</body>
</html>

效果图：（以画布中心为原点旋转）
这里写图片描述

freedom_文

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Canvas 开发绘图方法整理【九、Canvas旋转、缩放】

rotate() 旋转当前绘图　　（旋转）语法： ctx.rotate 需要注意的是它默认旋转的原点并不是以之前绘制的图形某一点为原点而是以Canvas 画布 x轴坐标0 y轴坐标0 的位置为原点的; 可以看下示例代码 ctx.fillStyle="#27A5FF"; ctx.fillRect(50,5...
复制链接

扫一扫