Canvas内部的坐标系简介

图形开发canvashtml5

在数学坐标系中，坐标原点(0,0)位于左下角，X轴向右延伸为正值，Y轴向上延伸为正值。然而，在屏幕坐标系中，这一规则有所变化。屏幕坐标系的原点位于左上角，X轴的方向与数学坐标系一致，但Y轴向下延伸为正值。如下图，直角三角形在屏幕坐标系中的显示位置与数学坐标系中的位置呈现垂直翻转的对应关系。Canvas所遵循的正是屏幕坐标系规则。需要注意的是，如果在Canvas中使用负坐标绘图，绘制的图形将会移到画布的外面，我们看不见绘制的图形。所以一般绘图要使用正坐标。

运行效果

Canvas坐标系的特点：

  1. 原点在左上角：Canvas的原点设置在左上角，而不是中心。
  2. X轴向右增长：X轴的值从左到右逐渐增大。
  3. Y轴向下增长：Y轴的值从上到下逐渐增大，这与数学中的常规坐标系相反。

Canvas坐标系示例

以下是一个网页示例，展示了如何在Canvas上绘制一个矩形，并标注出其坐标系的一些关键点。

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas坐标系示例</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="300" style="border:1px solid #000000;">
        Your browser does not support the HTML5 canvas tag.
    </canvas>

    <script>
        var canvas = document.getElementById('myCanvas');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');

            // 绘制矩形
            ctx.fillStyle = '#FF0000'; // 红色
            ctx.fillRect(50, 50, 200, 100); // 起始点(50,50)，宽200，高100

            // 绘制坐标轴和原点
            ctx.beginPath();
            ctx.moveTo(0, 0); // 移动到原点
            ctx.lineTo(400, 0); // 绘制X轴
            ctx.moveTo(0, 0);
            ctx.lineTo(0, 300); // 绘制Y轴
            ctx.strokeStyle = '#0000FF'; // 设置线条颜色为蓝色
            ctx.stroke(); // 绘制线条

            // 标注原点
            ctx.fillStyle = '#000000'; // 黑色
            ctx.font = '16px Arial';
            ctx.fillText('(0,0)', 5, 20); // 在原点附近标注

            // 标注矩形的一个角点
            ctx.fillText('(50,50)', 50, 40);

            // 标注矩形的对角点
            ctx.fillText('(250,150)', 250, 130);
        }
    </script>
</body>
</html>

在这个示例中，我们创建了一个400x300像素的Canvas元素，并在其上绘制了一个红色的矩形，起始于点(50,50)，宽度为200像素，高度为100像素。接着，我们使用蓝色线条绘制了X轴和Y轴，并在Canvas上标注了原点(0,0)以及矩形的一个角点(50,50)和对角点(250,150)，以更直观地展示Canvas内部的坐标系。

上一篇：求助详细讲解在Canvas画布上绘制矩形的实现过程

下一篇：JavaScript中事件有哪些类型？