Як зробити прозоре полотно в html5?

123

Як зробити полотно прозорим? Мені це потрібно, тому що я хочу покласти два полотна один на одного.

html canvas

194

Полотна за замовчуванням прозорі.

Спробуйте встановити фонове зображення сторінки, а потім покладіть на неї полотно. Якщо на полотні нічого не намальовано, ви можете повністю побачити фон сторінки.

Подумайте про полотно, як про малювання на скляній тарілці.

— Оміод
джерело

6

Полотно має чорний фон на мобільних, тому багатошарові полотна там не працюють. (Принаймні на Chrome для Android)

— нікчемний

11

Стільки для стандартів, як зазвичай.

— Трайнко

6

Я думаю, що в цих відповідях не вистачає сенсу. Подібно до вищезазначеного питання, я хочу мати два шаруватих полотна: нижній - статичне зображення, а верхній - з анімованими спрайтами. Цей верхній шар повинен мати прозорий фон, але також повинен бути «очищений» та перемальований за допомогою кожного анімаційного кадру. Так, воно запускається прозорим за замовчуванням, але як його скинути на прозорий і початок кожного нового анімаційного кадру?

— J Sprague

3

Це як очистити полотно в будь-який час: stackoverflow.com/questions/2142535 / ...

— Omiod

Оскільки у вас так багато грошей, чи можете ви принаймні відповісти на питання? Як зробити непрозоре полотно прозорим?

— DDD

48

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

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

— J Sprague
джерело

45

Якщо ви хочете, щоб конкретна <canvas id="canvasID">завжди була прозорою, ви просто повинні встановити її

#canvasID{
    opacity:0.5;
}

Натомість, якщо ви хочете, щоб якісь конкретні елементи всередині області полотна були прозорими, ви повинні встановити прозорість, коли малюєте, тобто

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

— stecb
джерело

Ах, я шукав прозорість fillStyle. Дякую!

— Workman

3

FYI: opacityзміни не матимуть ефекту, якщо полотно буде залито фоном.

— Адам Еберлін

3

Просто встановіть фон полотна прозорим.

#canvasID{
    background:transparent;
}

— Марсель Бомфім
джерело

1

Ця відповідь працює не у всіх ситуаціях, контекст.clearRect (0, 0, ширина, висота) - це рішення, яке працювало для мене

— Дмитро

2

Намалюйте свої два полотна на третьому полотні.

У мене була ця сама проблема, і жодне з рішень тут не вирішило моєї проблеми. У мене було одне непрозоре полотно з іншим прозорим полотном над ним. Непрозоре полотно було абсолютно непомітним, але видно тло тіла сторінки. Малюнки з прозорого полотна вгорі були видні, тоді як непрозоре полотно під ним не було.

— Кріс
джерело

0

Не можу коментувати останню відповідь, але виправити відносно легко. Просто встановіть колір тла вашого непрозорого полотна:

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

Я не впевнений, але схоже, що колір фону успадковується як прозорий від тіла.

— 1000Gbps
джерело