这看起来很奇怪,但HTML5支持绘制线条,圆形,矩形和许多其他基本形状,它没有任何适合绘制基本点的东西 . 唯一的方法是用你拥有的任何东西来模拟一个点 .
所以基本上有3种可能的解决方案:
绘制点作为一条线
绘制点作为多边形
画圆点
他们每个人都有自己的缺点 .
Line
function point(x, y, canvas){
canvas.beginPath();
canvas.moveTo(x, y);
canvas.lineTo(x+1, y+1);
canvas.stroke();
}
请记住,我们正在向东南方向前进,如果这是边缘,则可能存在问题 . 但你也可以在任何其他方向画画 .
Rectangle
function point(x, y, canvas){
canvas.strokeRect(x,y,1,1);
}
或者以更快的方式使用fillRect,因为渲染引擎只会填充一个像素 .
function point(x, y, canvas){
canvas.fillRect(x,y,1,1);
}
Circle
圆圈的一个问题是引擎更难渲染它们
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();
}
Problems with all these solutions:
很难跟踪你要绘制的所有点 .
当你放大时,它看起来很难看
如果你想知道什么是 the best way to draw a point ,我会选择填充矩形 . 你可以看到我jsperf here with comparison tests