老师,关于旋转有点不懂,谢谢
来源: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°旋转,是整个坐标轴旋转,然后再进行绘制。例如:

所以实际效果与自己想的不一致。
如果我的回答帮到了你,欢迎采纳,祝学习愉快~
相似问题