Question

我正在阅读Nick Morgan的 Javascript for Kids ，我制作了以下代码。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Animation</title>
</head>
<body>
    <canvas id ="canvas" width ="200" height="200"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        var circle = function (x, y, radius, fillCircle) {
            ctx.beginPath();
                ctx.arc(x, y, radius, 0, Math.PI * 2, false);
            if (fillCircle) {
                ctx.fill();
            }
            else {
                ctx.stroke();
            }
        }

        var drawBee = function (x, y) {
            ctx.lineWidth = 2;
            ctx.strokeStyle = "Black";
            ctx.fillStyle = "Gold";

            circle(x, y, 8, true);
            circle(x, y, 8, false);
            circle(x - 5, y - 11, 5, false);
            circle(x + 5, y - 11, 5, false);
            circle(x - 2, y - 1, 2, false);
            circle(x + 2, y - 1, 2, false);

        }

    </script>
</body>
</html>

现在，我创建了一个名为circle的函数来绘制一些圆，我希望在原始圆的中心上方创建两个带有黑色轮廓的圆，其值为x和y。

如您所见，这些圈子有代码

circle(x - 5, y - 11, 5, false);
circle(x + 5, y - 11, 5, false);

但是我认为类似于x轴，在正方向向右移动是x + 5，我认为在向上移动 y轴在正尺度上是{{1 }}。

为什么是y + 11而不是y - 11？

Answer 1

因为0,0是左上角，所以添加到y会下降，从y减去会增加。使用x,y表示法：

0,0   1,0   2,0   3,0   4,0
0,1   1,1   2,1   3,1   4,1
0,2   1,2   2,2   3,2   4,2
0,3   1,3   2,3   3,3   4,3
0,4   1,4   2,4   3,4   4,4

如果您添加到y上升，则0,0将是底部左侧。

不，不要认为这可能是左下角。我认为每个角已被某些坐标系用作0,0点。例如，默认情况下，0,0是PDF中的左下角。

Answer 2

事情是原点位于屏幕的左上角而不是预期的左下方，所以在y轴的情况下，这样的方式就是这样。如果您想使用context.transform(1, 0, 0, -1, 0, canvas.height)，可以将其翻转供参考考虑

In HTML5 Canvas, can I make the y axis go up rather than down?

Here is the discussion link you'll like to refer to

Answer 3

很久以前，从内存扫描像素，从最低地址（左上角）到最高（右下角）开始。显示器（CRT）将从左到右从上到下扫描，因为像素是从存储器中及时读取的，以激发屏幕上相应的磷像素。因此，从像素地址到x，y坐标和向后的转换自然地使y轴向下，因为它匹配存储器地址方向（正）和时间方向（时间正）。在那些日子里，即使最小的优化也非常重要。

现在你可以通过变换矩阵进行渲染，该矩阵可以独立地设置任一轴的方向（2D x，y）或3D（x，y，z）或更多（x，y，z，w），尽管除了约定和兼容性之外，原始像素数据仍然是从最低地址到最高地址。

JavaScript Canvas翻译y轴

3 个答案: