Чтобы изучить холст, вы должны сначала научиться рисовать сегменты линий, а затем вы сможете использовать множество простых сегментов линий для создания более сложной графики. Например, обычные диаграммы, гистограммы, линейные диаграммы и т. д. реализуются с помощью сегментов линий.
базовые знанияБазовых знаний о холсте не так много. В основном я умею рисовать отрезки линий, графику, изображения, текст и т. д. Холст можно нарисовать в браузере или простые картинки на сервере узла с помощью node-canvas. В этой статье описывается только рисование в браузере. Что касается рисования на стороне узла, вы можете проверить соответствующую информацию самостоятельно.
Чтобы рисовать в браузере, сначала определите элемент холста в HTML. Ширина и высота по умолчанию — 300 * 150, которые можно установить с помощью width и height . Обратите внимание, что ширина и высота стиля элемента холста и ширина и высота холста для рисования — это не одно и то же. Это будет обсуждаться позже.
<canvas id=canvas> <p>Текущий браузер не поддерживает холст, обновите браузер</p></canvas>
Перед рисованием мы должны сначала получить контекст контекста 2D-рисования текущего холста, а затем рисовать, управляя контекстом.
let Canvas = document.querySelector('#canvas');if (!canvas) { throw new Error('невозможно найти элемент холста');}// Примечание 2d. // Путем установки параметров; в webgl вы можете получить контекст трехмерного рисования let ctx = Canvas.getContext('2d'); Примечание. Приведенный выше фрагмент кода будет игнорироваться в последующих примерах, а переменная ctx будет использоваться непосредственно для представления контекста 2D-рисования холста.
Давайте посмотрим на систему координат в 2D-рисунке холста. Левый верхний угол текущего элемента холста — это начало координат (0,0), горизонтальное направление вправо — положительное направление оси X. Вертикальное направление вниз — это положительное направление оси Y, как показано ниже. Вы можете управлять системой координат посредством перемещения, вращения и масштабирования для создания некоторых анимаций. Эта часть будет подробно объяснена в разделе «Знания по анимации».
сегмент линии При рисовании простого сегмента линии вы обычно сначала устанавливаете стиль сегмента линии, например, цвет, ширину линии, стиль конечной точки линии и т. д. Мы устанавливаем глобальный стиль рисования ctx , устанавливая strokeStyle , который может быть rgba или шестнадцатеричным. значение цвета или объект градиента и т. д. Следующий код просто рисует сегмент красной линии шириной 10 от (10,10) до (50,60).
ctx.strokeStyle = 'red';ctx.lineWidth = 10;ctx.moveTo(10, 10);ctx.lineTo(50, 60);ctx.stroke();
Давайте сначала посмотрим на методы и свойства, связанные с рисованием сегментов линий.
Связанные свойства:
Связанные методы:
Попробуйте установить разные значения lineCap чтобы нарисовать один и тот же сегмент линии.
ctx.lineWidth = 10;ctx.textAlign = 'center';let flowers = ['красный', 'зеленый', 'синий'];let lineCaps = ['стык', 'круглый', 'квадрат'];for ( let [index, lc] of lineCaps.entries()) { ctx.strokeStyle = Colors[index] //Установим цвет сегмента линии ctx.lineCap = lc //Установим lineCap; ctx.beginPath(); // Очистить текущий путь ctx.moveTo(10, 20 + 20 * index); ctx.lineTo(50, 20 + 20 * index); ctx.fillText(lc, 80, 25 + 20 * индекс);} Как видно из результатов на рисунке выше, когда для lineCap установлено значение «круглый» и «квадратный», конечные точки определенной длины будут добавлены к обоим концам исходного сегмента линии, за исключением того, что «круглый» — это стиль дуги, а «квадрат» — прямоугольный. стиль. Следует отметить, что в контексте рисования холста одновременно может существовать только один текущий путь. Чтобы нарисовать разные сегменты линии, beginPath() должен вызываться перед каждым рисованием, чтобы очистить текущий маршрут и начать новый путь.
Давайте попробуем использовать разные значения lineJoin , чтобы отрисовать стили в фокусе двух отрезков линии.
ctx.lineWidth = 20;ctx.textAlign = 'center';ctx.lineCap = 'стык';let Colors = ['красный', 'зеленый', 'синий'];let lineJoins = ['Bevel', 'Round' , 'mitre'];for (let [index, lj] of lineJoins.entries()) { ctx.strokeStyle = Colors[index]; //Установим цвет сегмента линии ctx.lineJoin = lj; //Установим lineJoin ctx.beginPath() //Очистим текущий путь ctx.moveTo(10 + 80 * index, 20); 80 * индекс, 20); ctx.lineTo(50 + 80 * индекс, 60); ctx.fillText(lj, 40 + 80 * индекс, 80);} Видно, что три типа lineJoin по-разному обрабатывают фокус двух сегментов линии. Среди них, при установке lineJoin=miter максимальное соотношение длины линии среза к половине ширины линии может быть установлено путем установки атрибута miterLimit . Когда это соотношение превышено, lineJoin примет метод скоса.
На холсте можно рисовать не только сплошные, но и пунктирные линии. Нарисуйте пунктирную линию, установив свойство lineDashOffset и вызвав setLineDash() .
ctx.lineWidth = 10;ctx.textAlign = 'center';ctx.setLineDash([8, 8]); //Представляет 8 пикселей в части сплошной линии и 8 пикселей в части с пробелом let Colors = ['red', 'green ', 'blue'];let lineDashOffsets = [1, 2, 4];for (let [index, ldOffset] of lineDashOffsets.entries()) { ctx.strokeStyle = Colors[index]; //Цвет сегмента линии ctx.lineDashOffset = ldOffset; //Смещение установлено ctx.beginPath(); ctx.moveTo(10, 20 + 20 * index); 100, 20 + 20 * индекс); ctx.stroke(); ctx.fillText(`lineDashOffset:${ldOffset}`, 160, 25 + 20 * индекс);} Как вы можете видеть на рисунке, lineDashOffset — это смещение, необходимое для начала рисования пунктирной линии. Метод setLineDash() принимает параметр массива. Если количество массивов нечетное, он по умолчанию скопирует текущий элемент массива, чтобы сделать его четным. Начиная с 0-го элемента, он представляет длину части сплошной линии, 1-й элемент представляет длину части зазора, 2-й элемент представляет длину части сплошной линии, 3-й элемент представляет длину части зазора, если он достигает последнего элемента массива, снова начинается с нуля и так далее.
ctx.lineWidth = 10;ctx.textAlign = 'center';let columns = ['красный', 'зеленый', 'синий', 'серый'];let lineDashes = [[20, 20], [40, 40] , [20, 40], [20, 40, 20]];for (let [index, ld] of lineDashes.entries()) { ctx.strokeStyle = Colors[index]; //Установить цвет ctx.setLineDash(ld); //Установить lineDash ctx.beginPath(); ctx.moveTo(10, 20 + 20 * index); + 20 * index); ctx.stroke(); ctx.fillText(`lineDashes:[${ld}]`, 240, 25 + 20 * индекс);} let lineDashOffset = 0; //Начальная строкаDashOffsetctx.strokeStyle = 'green';function animate() { if (lineDashOffset > 25) { lineDashOffset = 0; } ctx.clearRect(0, 0, width, height); текущий холст ctx.lineDashOffset = -lineDashOffset //Установить lineDashOffset; ctx.setLineDash([4, 4]); //Установим длину сплошной линии и длину пробела ctx.rect(20, 20, 100, 100); //Рисуем прямоугольник ctx.stroke(); //Добавляем текущий путь к холсту Stroke lineDashOffset += 1 //lineDashOffset offset плюс 1 window.requestAnimationFrame(animate); //Используем частоту кадров браузера для многократного выполнения функции анимации}animate(); краткое содержание При рисовании сегмента линии вы должны понимать концепцию текущего пути холста. В определенный момент на холсте существует только один текущий путь. При запуске нового пути необходимо вызвать beginPath() . Вы можете установить стиль рисования сегментов линий, задав lineWidth , lineCap и lineJoin . При обводке сегмента линии вы можете установить цвет сегмента линии с strokeStyle .
На холсте можно рисовать не только сплошные линии, но и пунктирные линии можно рисовать с помощью lineDashOffset и setLineDash() .
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.