Как canvas сделать фоном
Вместо конкретного цвета для заливки фигур, например, прямоугольников, мы можем использовать изображения. Для этого у кконтекста canvas имеется функция createPattern() , которая принимает два параметра: изображение, которое будет использоваться в качестве фона, и принцип повторения изображения. Последний параметр играет роль в том случае, если размер изображения у нас меньше, чем размер фигуры на canvas. Этот параметр может принимать следующие значения:
- repeat : изображение повторяется для заполнения всего пространства фигуры
- repeat-x : изображение повторяется только по горизонтали
- repeat-y : изображение повторяется только по вертикали
- no-repeat : изображение не повторяется
Нарисуем прямоугольник и выведем в нем изображение:
Canvas в HTML5
Чтобы использовать изображение, нам надо создать элемент Image и установить источник изображения — локальный файл или ресурс в сети:
var img = new Image(); img.src = "dubi.png";
В данном случае предполагается, что в одной папке с файлом html у меня находится файл изображения dubi.png. Однако загрузка изображения может занять некоторое время, особенно если файл изображения берется из сети интернет. Поэтому, чтобы быть уверенными, что изображение уже загрузилось, все действия по его использованию производятся в методе img.onload , который вызывается при завершении загрузки изображения:
img.onload = function() < var pattern = context.createPattern(img, "repeat"); context.fillStyle = pattern; context.fillRect(10, 10, 150, 150); context.strokeRect(10, 10, 150, 150); >;
Метод createPattern() возвращает объект, который устанавливается в качестве стиля заполнения фигуры: context.fillStyle = pattern; . Отрисовка прямоугольника остается той же.
Свойство 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 фоном веб-страницы
Доброго дня!
Возникла такая проблема: создана веб-страница с помощью стандартных label, button, textarea и тд, а также создан canvas на который поместили картинки и подразумевали что эта картинка на canvas будет фоном для данной html-страницы с label, button, textarea и тд, но при добавлении данного canvas вместе со script и всем содержимым в html-файл (и в раздел body, и head, и сделать canvas в качестве body=background — без результата) почему-то часть страницы занимает сами, непосредственно, label, button, textarea и тд а ниже (или выше, смотря как указать) расположена моя картинка с фоном (которая должна быть фоном, коим не является, а присутствует на странице где-то самостоятельно).
как можно решить такую проблему?
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как сделать так, чтобы задний фон страницы не прокручивался вместе с передним фоном страницы ?
Как сделать так, чтобы задний фон страницы не прокручивался вместе с передним фоном страницы ?
Сделать картинку фоном страницы
Как сделать картинку фоном страницы, что-бы на ней создавались формы, тексты и т.д.
Как сделать, чтобы android не кэшировал веб страницы?
Пользователь нажимает на кнопку, открывается браузер (или WebView), переходит на мой сайт (страница.
Как сделать canvas на заднем плане относительно всех других canvas-ов (слой с кругами)
package com.ua.drawfigures; import android.graphics.Bitmap; import android.graphics.Canvas;.
Сделать 2 треугольника с блока и добавить линию по диагонали или как сделать адаптивный background с фоном
Товарищи знатоки как сверстать такой блок: В конечном итоге должно получится пока что сделал.
Как сделать canvas в качестве фона для div?
В инспекторе вижу, что путь к канвосу добавляется, но ничего не рисует, подскажите пожалуйста, в чем проблема?
- Вопрос задан более трёх лет назад
- 1447 просмотров
Комментировать
Решения вопроса 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 есть прозрачность, и, если канвас закрашен не полностью, а вы используете лишь его часть, то сложится впечатление, что на фоне ничего нет, хотя там что-то есть.