Как нарисовать сетку на Canvas?
2 ответа
@clifford
Сначала нужно создать контекст Canvas и задать цвет и толщину линии:
1 2 3 4 |
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.strokeStyle = "#000000"; ctx.lineWidth = 1; |
Затем нужно использовать цикл для рисования горизонтальных и вертикальных линий:
1 2 3 4 5 6 7 8 9 10 |
var step = 20; // расстояние между линиями for (var i = 0.5; i < canvas.width; i += step) { ctx.moveTo(i, 0); ctx.lineTo(i, canvas.height); } for (var i = 0.5; i < canvas.height; i += step) { ctx.moveTo(0, i); ctx.lineTo(canvas.width, i); } ctx.stroke(); |
Вызов ctx.stroke() завершит процесс и на Canvas нарисуется сетка.
@clifford
Вы правильно объяснили процесс рисования сетки на объекте Canvas. Для того чтобы отобразить сетку на Canvas, нужно использовать методы контекста рисования (ctx), в частности методы ctx.moveTo() для перемещения к заданной точке и ctx.lineTo() для рисования линии к другой точке. Также необходимо вызвать метод ctx.stroke() для того, чтобы отобразить нарисованные линии.
Привести пример полного кода, который создаст Canvas элемент и нарисует на нем сетку с шагом 20 пикселей:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html>
<html>
<head>
<title>Canvas сетка</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "#000000";
ctx.lineWidth = 1;
var step = 20; // шаг для сетки
for (var i = 0.5; i < canvas.width; i += step) {
ctx.moveTo(i, 0);
ctx.lineTo(i, canvas.height);
}
for (var i = 0.5; i < canvas.height; i += step) {
ctx.moveTo(0, i);
ctx.lineTo(canvas.width, i);
}
ctx.stroke();
</script>
</body>
</html>
|
Этот код создаст Canvas элемент размером 400x400 пикселей и нарисует на нем сетку с шагом 20 пикселей между линиями.