82 lines
3.4 KiB
Markdown
82 lines
3.4 KiB
Markdown
---
|
||
title: Paths
|
||
localeTitle: пути
|
||
---
|
||
## Контуры в холсте
|
||
|
||
Пути - это строительный блок рисования в холсте. Путь - это просто форма. Затем форму можно нарисовать, погладив ее или наполнив.
|
||
|
||
Мы можем создавать пути использования с `beginPath` , `fill` и `stroke` .
|
||
|
||
```js
|
||
ctx.beginPath();
|
||
ctx.rect(0, 0, 100, 100);
|
||
ctx.fillStyle="black";
|
||
ctx.fill();
|
||
```
|
||
|
||
Это создает черный квадрат в верхнем правом углу холста. Мы можем изменять штрихи и заливки с помощью `strokeStyle` и `fillStyle` , которые берут CSS-подобные цветовые строки. Мы также можем использовать `lineWidth` для `lineWidth` .
|
||
|
||
```js
|
||
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` до пути.
|
||
|
||
Обратите внимание, что эти функции добавляют к рабочему пути. Они не создают новые пути.
|
||
|
||
```js
|
||
//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` .
|
||
|
||
```js
|
||
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` .
|
||
|
||
Подробнее о анимации читайте на странице « [Анимация»](/articles/canvas/animation-in-canvas/) .
|
||
|
||
#### Дополнительная информация:
|
||
|
||
* [API холста MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) |