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

123

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

html canvas Urmelinho
источник

Ответы:

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
источник