html5画布画点,在HTML5画布上绘制一个点

Salvador Dal..

39

这看起来很奇怪,但HTML5支持绘制线条,圆形,矩形和许多其他基本形状,它没有任何适合绘制基本点的东西.唯一的方法是用你拥有的任何东西来模拟一个点.

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

画点作为一条线

将点绘制为多边形

画圆点

他们每个人都有自己的缺点.

线

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