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

Question

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

Answer 1

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

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

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

Answer 2

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

#canvasID{
    opacity:0.5;
}

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

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

Answer 3

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

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

Answer 4

Просто установите фон холста на прозрачный.

#canvasID{
    background:transparent;
}

Answer 5

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

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

Answer 6

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

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

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