老师,关于旋转有点不懂,谢谢
来源: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>
未进行旋转时:
旋转后:
1、请问是:以原点为圆心进行30°旋转是吗,
2、以圆心的情况下,为什么旋转后的圆点会变动了,不是应该:
3、到底是以什么为中心(不动的定点?还是说没有不动点,只有旋转就会变动?)进行旋转?
1回答
同学你好,不是以原点为圆心进行30°旋转,是整个坐标轴旋转,然后再进行绘制。例如:
所以实际效果与自己想的不一致。
如果我的回答帮到了你,欢迎采纳,祝学习愉快~
相似问题