老师，这个旋转还是不太理解，坐标轴是已（0，0）那条为坐标轴吗？
来源：4-3 Canvas图形变换之旋转和缩放
慕桂英1352525
2021-08-14 18:10:30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas{
border:1px solid black;
}
</style>
</head>
<body>
<canvas id='hua' height=700 width=700></canvas>
<script>
var nav=document.getElementById('hua');
var ctx=nav.getContext('2d');
ctx.moveTo(200,200);
ctx.lineTo(300,200);
ctx.stroke();
ctx.rotate(Math.PI/4);
ctx.moveTo(200,200);
ctx.lineTo(300,200);
ctx.stroke();
</script>
</body>
</html>
为什么一旋转，不管原点是哪里，画出来的那条线就会贴着那条轴
1回答
-
同学你好，解答如下：
1、坐标原点是canvas左上角，x、y坐标轴方向如下图：
所以第一条线ctx.moveTo(200,200)、ctx.lineTo(300,200)的效果如下：
而ctx.rotate(Math.PI/4)则是把坐标轴整体旋转了45度，下图蓝色箭头表示的就是旋转后的坐标轴：
而如下代码则是对应蓝色坐标系上的位置：
因此效果如下（粉色的方框就是第二条线）：
祝学习愉快！
0
相似问题