Ключом к тому, чтобы иметь сильные структуры, являются основы, для этого у нас должны быть сильные и четко определенные основы, поэтому, чтобы иметь возможность использовать элемент Canvas в его максимальном объеме, мы должны сначала глубоко знать основы, и поэтому мы начнем Чтобы нарисовать основные формы, мы узнаем, как работают различные методы рисования, а затем мы можем создавать более сложные композиции.
Нарисуйте прямоугольник
Прямоугольник - это очень простая фигура, состоящая из 4 сторон, давайте посмотрим, какие методы у нас есть, чтобы нарисовать ее на холсте:
- clearRect (x, y, w, h): очищает прямоугольник или часть ранее указанного прямоугольника.
- fillRect (x, y, w, h): используется для рисования прямоугольника с заливкой.
- strokeRect (x, y, w, h): используется для рисования прямоугольника без заливки.
- xy - пределы верхнего левого края прямоугольника.
- которые соответствуют ширине и высоте соответственно.
Пример холста {бордюр: тонкий сплошной черный; margin: 4px} Ваш браузер не поддерживает элемент canvas var ctx = document.getElementById ("canvas"). getContext ("2d"); переменное смещение = 10; размер var = 50; var count = 5; for (var i = 0; i <count; i ++) {ctx.fillRect (i * (смещение + размер) + смещение, смещение, размер, размер); ctx.strokeRect (i * (смещение + размер) + смещение, (2 * смещение) + размер, размер, размер); } В этом примере мы видим, что мы определяем некоторые переменные, в которых мы сообщаем смещение или предел, где будут начинаться прямоугольники, размер, а затем счетчик переменных, который будет служить счетчиком для выполнения повторений, поэтому в следующем разделе мы знаем, что будем делать прямоугольники динамически, давайте посмотрим, как они отображаются в нашем браузере:
Мы сделали две строки по 5 прямоугольников в каждой, если бы мы посмотрели на код, который сначала вызывали методы fillRect () для закрашенных прямоугольников, а затем для штрихов для незаполненных .
Использование метода clearRect ()
Что если теперь мы хотим убрать часть заполненных прямоугольников? Для этого у нас есть метод clearRect (), в следующем коде мы увидим, как он работает:
Пример холста {бордюр: тонкий сплошной черный; margin: 4px} Ваш браузер не поддерживает элемент canvas var ctx = document.getElementById ("canvas"). getContext ("2d"); переменное смещение = 10; размер var = 50; var count = 5; for (var i = 0; i <count; i ++) {ctx.fillRect (i * (смещение + размер) + смещение, смещение, размер, размер); ctx.strokeRect (i * (смещение + размер) + смещение, (2 * смещение) + размер, размер, размер); размер, размер); ctx.clearRect (i * (смещение + размер) + смещение, смещение + 5, размер, размер -10); } Для каждого повторения мы применяем вызов метода clearRect (), и при создании алгоритма, который мы сделали, он проходит через весь центр заполненных прямоугольников, давайте посмотрим на следующем рисунке, как это происходит в нашем браузере:
Здесь мы можем видеть, как мы убрали область, которую мы нарисовали раньше.
На этом мы заканчиваем этот урок, где мы смогли немного подробнее увидеть некоторые методы, которые мы можем использовать для рисования на нашем элементе Canvas .
- 0
СТАТЬИ