老师,关于旋转有点不懂,谢谢

来源:4-3 Canvas图形变换之旋转和缩放

qq_慕移动3101913

2020-02-28 15:41:49

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>canvasL</title>
    <style>
        canvas {
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="600px" height="600px">您的浏览器不支持</canvas>
    <script>
        // 获取元素
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

    //rotate 旋转变换
      ctx.rotate(Math.PI/6);
      ctx.moveTo(200,200);
      ctx.lineTo(400,400);
      ctx.lineWidth = 5;
      ctx.strokeStyle = "#F00";
      ctx.stroke();

    </script>
</body>

</html>

未进行旋转时:http://img.mukewang.com/climg/5e58c2e20985bb6704910492.jpg

旋转后:http://img.mukewang.com/climg/5e58c30909e9fc9204900498.jpg

1、请问是:以原点为圆心进行30°旋转是吗,

2、以圆心的情况下,为什么旋转后的圆点会变动了,不是应该:http://img.mukewang.com/climg/5e58c3d9092b22fe04910488.jpg

3、到底是以什么为中心(不动的定点?还是说没有不动点,只有旋转就会变动?)进行旋转?

写回答

1回答

好帮手慕星星

2020-02-28

同学你好,不是以原点为圆心进行30°旋转,是整个坐标轴旋转,然后再进行绘制。例如:

http://img.mukewang.com/climg/5e58e0520940ef1d04690220.jpg

所以实际效果与自己想的不一致。

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

0
hq_慕移动3101913
h 原来这样,谢谢老师。
h020-02-28
共1条回复

0 学习 · 6815 问题

查看课程