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

Ответ 1

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

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

Подумайте о холсте, как о живописи на стеклянной пластине.

Ответ 2

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

#canvasID{
    opacity:0.5;
}

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

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

Ответ 3

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

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

Ответ 4

Просто установите фон canvas прозрачным.

#canvasID{
    background:transparent;
}

Ответ 5

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

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

Ответ 6

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

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

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