3.4 KiB
title | localeTitle |
---|---|
Paths | пути |
Контуры в холсте
Пути - это строительный блок рисования в холсте. Путь - это просто форма. Затем форму можно нарисовать, погладив ее или наполнив.
Мы можем создавать пути использования с beginPath
, fill
и stroke
.
ctx.beginPath();
ctx.rect(0, 0, 100, 100);
ctx.fillStyle="black";
ctx.fill();
Это создает черный квадрат в верхнем правом углу холста. Мы можем изменять штрихи и заливки с помощью strokeStyle
и fillStyle
, которые берут CSS-подобные цветовые строки. Мы также можем использовать lineWidth
для lineWidth
.
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.moveTo(0, 100);
ctx.lineTo(300, 250);
ctx.strokeStyle="red";
ctx.lineWidth=2;
ctx.stroke();
Существуют четыре основные функции рисования: rect
, moveTo
, lineTo
и arc
.
rect(x, y, width, height)
добавляет прямоугольник, созданный из (x
,y
) размеров (width
,height
) к пути.moveTo(x,y)
перемещает перо в точку на холстеlineTo(x,y)
перемещает перо в точку на холсте, а затем добавляет линию между новой точкой и старой точкой пути.arc(x, y, r, ti, tf)
добавляет дугу (часть круга) в точке (x
,y
) с радиусомr
и от углаti
доtf
до пути.
Обратите внимание, что эти функции добавляют к рабочему пути. Они не создают новые пути.
//example 1
ctx.beginPath();
ctx.rect(0, 0, 50, 50);
ctx.rect(100, 100, 50, 50);
ctx.fill();
//example 2
ctx.beginPath();
ctx.rect(0, 0, 50, 50);
ctx.beginPath();
ctx.rect(100, 100, 50, 50);
ctx.fill();
Первый пример будет рисовать два квадрата, а второй будет рисовать только один, так как beginPath
отбрасывает первый прямоугольник на прежнем рабочем пути.
Этот факт приводит к общей ошибке при создании анимации canvas
.
var x = 0;
var y = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.rect(x, y, 50, 50);
ctx.fill();
x+=1;
window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
Вышеупомянутая анимация, которая должна сделать квадратное перемещение по экрану, вместо этого создает длинную черную полосу. Причина в том, что beginPath
не вызывается внутри цикла draw
.
Подробнее о анимации читайте на странице « Анимация» .