Свойство fillStyle
Свойство fillStyle задает цвет заливки фигуры при рисовании на canvas. Значением свойства служат любые CSS единицы для цвета.
Синтаксис
контекст.fillStyle = цвет;
Пример
Давайте нарисуем квадрат с помощью rect и зальем его красным цветом:
let canvas = document.querySelector(‘#canvas’); let ctx = canvas.getContext(‘2d’); ctx.rect(50, 50, 100, 100); ctx.fillStyle = ‘red’; ctx.fill();
Смотрите также
- метод strokeStyle ,
который устанавливает цвет линии
Как canvas сделать фоном
Вместо конкретного цвета для заливки фигур, например, прямоугольников, мы можем использовать изображения. Для этого у контекста элемент canvas имеется функция createPattern() , которая принимает два параметра: изображение, которое будет использоваться в качестве фона, и принцип повторения изображения. Последний параметр играет роль в том случае, если размер изображения у нас меньше, чем размер фигуры на canvas. Этот параметр может принимать следующие значения:
- repeat : изображение повторяется для заполнения всего пространства фигуры
- repeat-x : изображение повторяется только по горизонтали
- repeat-y : изображение повторяется только по вертикали
- no-repeat : изображение не повторяется
Нарисуем прямоугольник и выведем в нем изображение:
METANIT.COM
Чтобы использовать изображение, нам надо создать элемент Image и установить источник изображения — локальный файл или ресурс в сети:
const img = new Image(); img.src = "forest.png";
В данном случае предполагается, что в одной папке с файлом html у меня находится файл изображения forest.png . Однако загрузка изображения может занять некоторое время, особенно если файл изображения берется из сети интернет. Поэтому, чтобы быть уверенными, что изображение уже загрузилось, все действия по его использованию производятся в методе img.onload , который вызывается при завершении загрузки изображения:
img.onload = function() < const pattern = context.createPattern(img, "repeat"); context.fillStyle = pattern; context.fillRect(10, 10, 200, 200); context.strokeRect(10, 10, 200, 200); >;
Метод createPattern() возвращает объект, который устанавливается в качестве стиля заполнения фигуры: context.fillStyle = pattern; . Отрисовка прямоугольника остается той же.
Как сделать canvas в качестве фона для div?
В инспекторе вижу, что путь к канвосу добавляется, но ничего не рисует, подскажите пожалуйста, в чем проблема?
- Вопрос задан более трёх лет назад
- 1536 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 2
Dymok @UnluckySerivelha
div < position: relative; >canvas
Ответ написан более трёх лет назад
Нравится 1 3 комментария
HellishCode @HellishCode Автор вопроса
проблема в том, что мне нужно использовать для div свойство background-size: cover
так как div у меня будет меньшего размера, чем сам канвас и для сохранения пропорций я хочу добавить канвас в качестве фона для дива и применить свойство background-size: cover
канвас к background не имеет вообще никакого отношения. путь вообще тупиковый
HellishCode @HellishCode Автор вопроса
Froggyweb, а как же background = «url(» + canvas.toDataURL() + «)»;
можно же использовать toDataURL()
Ivan Bogachev @sfi0zy Куратор тега CSS
Creative frontend developer
канвас добавить в качестве фона для div + background-size: cover
Проверьте правильность позиционирования этого фона, может он у вас съехал куда-то и вы его не видите. Плюс не забывайте, что у png есть прозрачность, и, если канвас закрашен не полностью, а вы используете лишь его часть, то сложится впечатление, что на фоне ничего нет, хотя там что-то есть.
Как сделать фон canvas картинкой?
Доброе время суток. Сам в js не силен. Но возник вопрос. Можно ли сделать и как фон canvas картинкой.
Есть строка ctx.fillStyle = «rgba(0,0,0,1)»; которая отвечает за фон, так вот как туда можно добавить img. Полный код ниже.
Emitter.prototype = < draw: function() < ctx.fillStyle = "rgba(0,0,0,1)"; ctx.beginPath(); ctx.arc(this.position.x, this.position.y, this.radius, 0, Math.PI*2, false); ctx.fill(); ctx.closePath(); >, update: function() < for(var i=0; i< this.count; i++) < this.particles[i].update(); >this.draw(); > >- Вопрос задан более трёх лет назад
- 4025 просмотров