Bagaimana cara membuat kanvas transparan di html5?

123

Bagaimana cara membuat kanvas menjadi transparan? Saya perlu karena saya ingin meletakkan dua kanvas di atas satu sama lain.

html canvas

— Urmelinho
sumber

194

Kanvas transparan secara default.

Coba atur gambar latar belakang halaman, lalu letakkan kanvas di atasnya. Jika tidak ada yang digambar di kanvas, Anda dapat sepenuhnya melihat latar belakang halaman.

Bayangkan kanvas seperti lukisan di atas piring kaca.

— Omiod
sumber

6

Kanvas memiliki latar belakang hitam di ponsel sehingga pelapis kanvas tidak berfungsi di sana. (Setidaknya di Chrome untuk Android)

— nicholeous

11

Begitu banyak untuk standar, seperti biasa.

— Triynko

6

Saya pikir jawaban ini kehilangan intinya. Mirip dengan pertanyaan di atas, saya ingin memiliki dua kanvas berlapis: yang paling bawah memiliki gambar statis, tetapi yang teratas akan memiliki sprite animasi. Lapisan atas ini harus memiliki latar belakang transparan, tetapi juga harus 'dibersihkan' dan digambar ulang dengan setiap bingkai animasi. Ya, ini mulai transparan secara default, tetapi bagaimana Anda mengatur ulang menjadi transparan dan memulai setiap bingkai animasi baru?

— J Sprague

3

Ini adalah cara membersihkan kanvas kapan saja: stackoverflow.com/questions/2142535/…

— Omiod

Karena Anda mendapat begitu banyak suara positif. Bisakah Anda setidaknya menjawab pertanyaan itu juga? Bagaimana Anda membuat kanvas yang tidak transparan menjadi transparan?

— DDD

48

Saya yakin Anda mencoba melakukan apa yang baru saja saya coba lakukan: Saya ingin dua kanvas bertumpuk ... bagian bawah memiliki gambar statis dan yang atas berisi sprite animasi. Karena animasinya, Anda perlu membersihkan latar belakang lapisan atas menjadi transparan pada awal rendering setiap bingkai baru. Saya akhirnya menemukan jawabannya: tidak menggunakan globalAlpha, dan tidak menggunakan warna rgba (). Jawaban sederhana dan efektif adalah:

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

— J Sprague
sumber

45

Jika Anda ingin item <canvas id="canvasID">selalu transparan, Anda hanya perlu mengaturnya

#canvasID{
    opacity:0.5;
}

Sebaliknya, jika Anda ingin beberapa elemen tertentu di dalam area kanvas menjadi transparan, Anda harus menyetel transparansi saat Anda menggambar, yaitu

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

— stecb
sumber

Ah, saya sedang mencari transparansi fillStyle. Terima kasih!

— Pekerja

3

FYI: opacityperubahan tidak akan berpengaruh jika ada latar belakang mengisi kanvas.

— Adam Eberlin

3

Cukup atur latar belakang kanvas menjadi transparan.

#canvasID{
    background:transparent;
}

— Marcel Bomfim
sumber

1

Jawaban ini tidak berfungsi di semua situasi, context.clearRect (0, 0, width, height) adalah solusi yang berhasil untuk saya

— Dmitriy

2

Warnai kedua kanvas Anda ke kanvas ketiga.

Saya memiliki masalah yang sama dan tidak ada solusi di sini yang memecahkan masalah saya. Saya memiliki satu kanvas buram dengan kanvas transparan lain di atasnya. Kanvas buram sama sekali tidak terlihat tetapi latar belakang badan halaman terlihat. Gambar dari kanvas transparan di atas terlihat sedangkan kanvas buram di bawahnya tidak terlihat.

— Chris
sumber

0

Tidak dapat mengomentari jawaban terakhir tetapi perbaikannya relatif mudah. Cukup atur warna latar belakang kanvas buram Anda:

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

Saya tidak yakin tetapi sepertinya warna latar belakang diwarisi sebagai transparan dari tubuh.

— 1000Gbps
sumber