Как сделать canvas фоном дива
Если все же нужно использовать канву как фон, можно воспользоваться этим способом:
let ctx = canvas.getContext('2d') ctx.fillRect(10,10,10,90) ctx.fillRect(10,50,90,10) ctx.fillRect(90,10,10,90) document.body.style.backgroundImage = `url($`;body
Отслеживать
ответ дан 29 июл 2019 в 12:45
Stranger in the Q Stranger in the Q
56k 10 10 золотых знаков 83 83 серебряных знака 136 136 бронзовых знаков
@Дмытрык вопрошающего явно уже ничего не интересует, сообщение писал для сообщества, в основном потому что единственный ответ — так себе
29 июл 2019 в 12:50
А почему position: absolute не нравится?
20 апр 2021 в 11:03
@МихаилКамахин мне всё нравится, пользуйся)
20 апр 2021 в 11:17
абсолютом его разместить.
Отслеживать
ответ дан 1 янв 2014 в 16:24
Елена Левина Елена Левина
2,210 12 12 серебряных знаков 10 10 бронзовых знаков
Я бы так сделал
const canvas = document.querySelector('#canvas'); const ctx = canvas.getContext('2d'); resizeCtxCanvas(ctx); function resizeCtxCanvas(ctx) < const < width, height >= ctx.canvas.getBoundingClientRect(); ctx.canvas.width = width; ctx.canvas.height = height; ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); drawCanvas(ctx); > window.addEventListener('resize', e => < resizeCtxCanvas(ctx); >); function drawCanvas(ctx) < const canvas = ctx.canvas; ctx.fillStyle = "red"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.strokeStyle = "#bcbcbc"; ctx.strokeWidth = 5; for (let y = 0; y < canvas.height; y += 96) < for (let x = 0; x < canvas.width; x += 96) < ctx.rect(x, y, 96, 96); ctx.stroke(); >> >* < box-sizing: border-box; >body < margin: 0; >.parentCanvas < position: relative; z-index: 1; >.canvas < width: 100%; height: 100%; >.parentCanvas .canvas < position: absolute; z-index: -1; top: 0; left: 0; >p
Блок с канвасом на фоне ниже
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod numquam blanditiis esse iste minima, excepturi dolor earum suscip
Как сделать canvas фоном?
Вообще работает, но ссылки перекрываются. Как сделать так, чтоб canvas был fixed и фоном, но при этом внизу? z-index он игнорирует.
Перемещено mono из talks
Deleted
19.12.17 14:32:44 MSK
Если нужно просто рисовать на canvas, а полученное изображение статично, то можно отрендерить off-screen с помощью canvas.toDataURL() , а затем положить изображение в фон.
Sadler ★★★
( 19.12.17 14:49:49 MSK )
Ответ на: комментарий от Sadler 19.12.17 14:49:49 MSK
Не, это типа валящиеся снежинки. Вот кусок:
А потом идёт один сплошной body.
Как 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; . Отрисовка прямоугольника остается той же.
Курсы javascript
Это просто цвет, rgba — red green blue alpha, в данном случае ключевое значение alpha — альфа канал — собственно прозрачность.
Всё сработало нормально: канвас очищается прозрачным. А то что потом всё засирается белым — это потому что вы плохо очищаете его после рисования.
P.S. Глянул поближе, так сполпинка на полную прозрачность не перепишешь, там многое основано на том, что чёрное перекрывает «лишнее» белое. Это определённо возможно, но займёт больше чем 5 минут, которые я готов вам на это выделить.
Как простой воркэраунд можно вообще не трогать js код, а добавмть в css: