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

电玩女神 2022-05-31 09:17 407阅读 0赞

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);
            };

效果图：  
![这里写图片描述][70]

--------------------

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

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

效果图：

![这里写图片描述][70 1]

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

--------------------

再来说下缩放的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);

效果图：  
![这里写图片描述][70 2]

--------------------

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

<!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>

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

[70]: /images/20220531/d0b199ca94bc4a39b7e6136e851b3afa.png
[70 1]: /images/20220531/ace880bb7865443893ca5097e873e597.png
[70 2]: /images/20220531/e41ba91c3ee8406586f0c0858ab9e946.png
[70 3]: /images/20220531/72674235ff17438ca988ccd3fef6e37f.png