Это кажется странным, но, тем не менее, HTML5 поддерживает рисование линий, кругов, прямоугольников и многих других базовых фигур, в нем нет ничего подходящего для рисования базовой точки. Единственный способ сделать это - смоделировать точку тем, что у вас есть.
Таким образом, в основном есть 3 возможных решения:
- нарисовать точку в виде линии
- точка рисования в виде многоугольника
- нарисовать точку в виде круга
У каждого из них есть свои недостатки
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 здесь со сравнительными тестами .