Как сделать прозрачный холст в html5?

123

Как сделать холст прозрачным? Мне это нужно, потому что я хочу положить два холста друг на друга.

html canvas

194

По умолчанию холсты прозрачные.

Попробуйте установить фоновое изображение страницы, а затем накройте его холстом. Если на холсте ничего не нарисовано, вы можете полностью увидеть фон страницы.

Думайте о холсте как о картине на стеклянной пластине.

— Omiod
источник

6

На мобильном устройстве Canvas имеет черный фон, поэтому наслоение холстов там не работает. (По крайней мере, в Chrome для Android)

— николезный

11

Как обычно, хватит и стандартов.

— Трийнко 07

6

Я думаю, что в этих ответах отсутствует главное. Как и в предыдущем вопросе, я хочу иметь два многослойных холста: нижний имеет статическое изображение, а верхний - анимированные спрайты. Этот верхний слой должен иметь прозрачный фон, но его также необходимо «очищать» и перерисовывать с каждым кадром анимации. Да, по умолчанию он запускается прозрачным, но как сделать его прозрачным и начало каждого нового кадра анимации?

— J Sprague

3

Вот как очистить холст в любое время: stackoverflow.com/questions/2142535/…

— Омиод,

Так как вы получили так много голосов, можете ли вы хотя бы ответить на вопрос? Как сделать непрозрачный холст прозрачным?

— DDD

48

Я считаю, что вы пытаетесь сделать именно то, что я пытался сделать: мне нужны два сложенных холста ... нижний имеет статическое изображение, а верхний - анимированные спрайты. Из-за анимации вам необходимо очищать фон верхнего слоя до прозрачного в начале рендеринга каждого нового кадра. Я наконец нашел ответ: он не использует globalAlpha и не использует цвет rgba (). Простой и эффективный ответ:

context.clearRect(0,0,width,height);

— Дж. Спраг
источник

45

Если вы хотите, чтобы конкретный объект <canvas id="canvasID">всегда был прозрачным, вам просто нужно установить

#canvasID{
    opacity:0.5;
}

Вместо этого, если вы хотите, чтобы некоторые элементы внутри области холста были прозрачными, вы должны установить прозрачность при рисовании, т.е.

context.fillStyle = "rgba(0, 0, 200, 0.5)";

— stecb
источник

Ах, я искал прозрачность fillStyle. Спасибо!

— Workman

3

К вашему сведению: opacityизменения не будут иметь никакого эффекта, если на холсте есть фоновая заливка.

— Адам Эберлин

3

Просто сделайте фон холста прозрачным.

#canvasID{
    background:transparent;
}

— Марсель Бомфим
источник

1

Этот ответ работает не во всех ситуациях, context.clearRect (0, 0, width, height) - это решение, которое сработало для меня

— Дмитрий

2

Нарисуйте свои два холста на третьем холсте.

У меня была такая же проблема, и ни одно из решений здесь не решило мою проблему. У меня был один непрозрачный холст с другим прозрачным холстом над ним. Непрозрачный холст был полностью невидим, но фон тела страницы был виден. Рисунки с прозрачного холста сверху были видны, а непрозрачного холста под ним - нет.

— Крис
источник

0

Не могу прокомментировать последний ответ, но исправить это относительно просто. Просто установите цвет фона непрозрачного холста:

#canvas1 { background-color: black; } //opaque canvas
#canvas2 { ... } //transparent canvas

Я не уверен, но похоже, что цвет фона унаследован как прозрачный от тела.

— 1000Gbps
источник