这看起来很奇怪，但是HTML5支持画线、圆、矩形和许多其他基本形状，它没有任何适合画基本点的东西。唯一的方法就是用你有的东西来模拟点。

所以基本上有三种可能的解决方案:

画一个点作为一条线 画一个多边形 画一个圆

每一种都有其缺点

Line

function point(x, y, canvas){
  canvas.beginPath();
  canvas.moveTo(x, y);
  canvas.lineTo(x+1, y+1);
  canvas.stroke();
}

请记住，我们正在画东南方向，如果这是边缘，可能会有问题。但你也可以往其他方向画。

矩形

function point(x, y, canvas){
  canvas.strokeRect(x,y,1,1);
}

或者以更快的方式使用fillRect，因为渲染引擎只会填充一个像素。

function point(x, y, canvas){
  canvas.fillRect(x,y,1,1);
}

圆

圆形的一个问题是，引擎很难渲染它们

function point(x, y, canvas){
  canvas.beginPath();
  canvas.arc(x, y, 1, 0, 2 * Math.PI, true);
  canvas.stroke();
}

与矩形相同的想法，你可以实现与填充。

function point(x, y, canvas){
  canvas.beginPath();
  canvas.arc(x, y, 1, 0, 2 * Math.PI, true);
  canvas.fill();
}

所有这些解决方案都存在问题:

要记住你要画的所有点是很困难的。 当你放大的时候，它看起来很丑。

如果你想知道，“画一个点的最好方法是什么?”，我会选择填充矩形。您可以在这里看到带有比较测试的jsperf。

长方形呢?这比创建ImageData对象更有效。

这看起来很奇怪，但是HTML5支持画线、圆、矩形和许多其他基本形状，它没有任何适合画基本点的东西。唯一的方法就是用你有的东西来模拟点。

所以基本上有三种可能的解决方案:

画一个点作为一条线 画一个多边形 画一个圆

每一种都有其缺点

Line

function point(x, y, canvas){
  canvas.beginPath();
  canvas.moveTo(x, y);
  canvas.lineTo(x+1, y+1);
  canvas.stroke();
}

请记住，我们正在画东南方向，如果这是边缘，可能会有问题。但你也可以往其他方向画。

矩形

function point(x, y, canvas){
  canvas.strokeRect(x,y,1,1);
}

或者以更快的方式使用fillRect，因为渲染引擎只会填充一个像素。

function point(x, y, canvas){
  canvas.fillRect(x,y,1,1);
}

圆

圆形的一个问题是，引擎很难渲染它们

function point(x, y, canvas){
  canvas.beginPath();
  canvas.arc(x, y, 1, 0, 2 * Math.PI, true);
  canvas.stroke();
}

与矩形相同的想法，你可以实现与填充。

function point(x, y, canvas){
  canvas.beginPath();
  canvas.arc(x, y, 1, 0, 2 * Math.PI, true);
  canvas.fill();
}

所有这些解决方案都存在问题:

要记住你要画的所有点是很困难的。 当你放大的时候，它看起来很丑。

如果你想知道，“画一个点的最好方法是什么?”，我会选择填充矩形。您可以在这里看到带有比较测试的jsperf。

嗯，你也可以只做一个1像素宽的线，长度为1像素，让它的方向沿着一个轴移动。

            ctx.beginPath();
            ctx.lineWidth = 1; // one pixel wide
            ctx.strokeStyle = rgba(...);
            ctx.moveTo(50,25); // positioned at 50,25
            ctx.lineTo(51,25); // one pixel long
            ctx.stroke();

像sdleihssirhc说的那样画一个矩形!

ctx.fillRect (10, 10, 1, 1);

^——应该在x:10, y:10处画一个1x1的矩形

由于不同的浏览器似乎更喜欢不同的方法，也许在加载过程中对所有这三种方法进行一个较小的测试，以找出使用哪个方法最好，然后在整个应用程序中使用该方法是有意义的。