Используйте <canvas> в качестве фона CSS
Могу ли я использовать элемент canvas в качестве фона CSS?
8 ответов
Это стало возможным в WebKit с 2008 года, см. здесь .
В настоящее время Firefox 4 содержит функцию, которая позволяет использовать любой элемент (включая canvas) в качестве фона CSS следующим образом:
Невозможно прокомментировать, поэтому я создам свой собственный ответ для этого.
Этот ответ основан на @livedo, @Eric Rowell и @shabunc
Попробуйте -moz-element(#id) для CSS background в Firefox.
И -webkit-canvas(name) для CSS background в браузерах на основе WebKit .
Я думаю, что самое близкое, что вы могли бы получить, это выполнить рендеринг в canvas , вызвать toDataUrl() для него, чтобы получить содержимое в виде изображения, и присвоить его результат свойству background-image требуемого элемента. Это только даст статический фон, хотя. Однако если вы хотите иметь возможность дополнительно обновлять canvas , вам нужно вместо этого расположить холст позади другого элемента, как уже предлагал Йохан.
Вы можете быстро эмулировать это поведение без снижения производительности toDataURL() , используя z-index (предоставлено, это обходной путь, поскольку CSS-изображения 4 / CSS Houdini не реализовали «background: element (#mycanvas ) «по состоянию на 2017 год))
Работаю JSFiddle здесь. Я не писал этого, вся заслуга принадлежит Дереку Leung :
В последние недели я пытался реализовать эту функцию. Лучшее решение, которое я нашел, было предложено bcat :
- Рендеринг холста (видимый или скрытый)
- Получить изображение холста с помощью «canvas.toDataURL»
- Назначьте эти данные изображения в качестве фонового изображения для элемента (я использую MooTools)
Плохая новость: для статических изображений работает отлично , но с анимацией в Chrome иногда «мигает» , а в Firefox blinks-a-lot . Может быть, кто-то знает обходной путь, чтобы избавиться от этого «мерзкого моргания».
Как canvas сделать фоном
Вместо конкретного цвета для заливки фигур, например, прямоугольников, мы можем использовать изображения. Для этого у кконтекста canvas имеется функция createPattern() , которая принимает два параметра: изображение, которое будет использоваться в качестве фона, и принцип повторения изображения. Последний параметр играет роль в том случае, если размер изображения у нас меньше, чем размер фигуры на canvas. Этот параметр может принимать следующие значения:
repeat : изображение повторяется для заполнения всего пространства фигуры
repeat-x : изображение повторяется только по горизонтали
repeat-y : изображение повторяется только по вертикали
no-repeat : изображение не повторяется
Нарисуем прямоугольник и выведем в нем изображение:
Чтобы использовать изображение, нам надо создать элемент Image и установить источник изображения — локальный файл или ресурс в сети:
Как сделать canvas в качестве фона для div?
Всем привет.
Есть обычный канвас, в который вставлена картинка.
Пытаюсь этот канвас добавить в качестве фона для div.
В инспекторе вижу, что путь к канвосу добавляется, но ничего не рисует, подскажите пожалуйста, в чем проблема?
- Вопрос задан более двух лет назад
- 983 просмотра
- Вконтакте
- Вконтакте
Проверьте правильность позиционирования этого фона, может он у вас съехал куда-то и вы его не видите. Плюс не забывайте, что у png есть прозрачность, и, если канвас закрашен не полностью, а вы используете лишь его часть, то сложится впечатление, что на фоне ничего нет, хотя там что-то есть.