<canvas> 坐标空间与尺寸答案

【问题标题】：<canvas> coordinate space vs. dimensions<canvas> 坐标空间与尺寸
【发布时间】：2019-03-25 22:57:43
【问题描述】：

考虑一个 4x4 像素的 HTML 画布元素。

坐标系从左上角的(0,0)到右下角的(4,4)。

这表示一个 5x5 的网格。

似乎画布在每个维度上挤压了一个额外的像素，而没有改变宽度或高度。如果我想在 NxN 画布上绘制精确的像素，我该如何解决这个问题？

【问题讨论】：

什么？ 4x4 画布代表 4x4 网格。坐标 0 是第一个单元格中心左侧的半个像素（或此像素表示的 1x1 矩形的左上角），坐标 4 是最后一个单元格中心右侧的半个像素（或 top-此像素的右上角）[0-4]（含）。
@Kaiido 那么，坐标是指像素的角吗？ IE。像素的每个角都有不同的 (x,y)？
就像任何网格系统一样，是的。 0,0 处的像素一直延伸到 1,1 处的像素，它实际上是一个 1x1 矩形。坐标指的是这个网格系统上的位置，它们也可以是浮动的。但是，是的，使用默认矩阵变换，整数坐标落在像素的边界上。
完美，答案。

标签： html canvas

【解决方案1】：

坐标 (x,y) 没有 index 像素，就好像画布是二维数组一样。

在这种情况下，网格线之间的区域确实与单个像素重合，但如果我们将画布视为像素图，那么一个像素就是网格线之间的空间。

要在 (x,y) 的左上角绘制像素 (i, j)，请这样做

canvas_context.fillRect(x, y, 1, 1);

【讨论】：