ฉันจะสร้างแคนวาสโปร่งใสใน html5 ได้อย่างไร

ฉันจะทำให้ผ้าใบโปร่งใสได้อย่างไร ฉันจำเป็นต้องทำเพราะฉันต้องการวางสองผืนผ้าใบทับกัน

แคนวาสจะโปร่งใสโดยค่าเริ่มต้น

ลองตั้งค่าภาพพื้นหลังของหน้าแล้ววางผ้าใบทับ หากไม่มีสิ่งใดวาดลงบนผืนผ้าใบคุณจะเห็นพื้นหลังของหน้าได้อย่างเต็มที่

คิดว่าผืนผ้าใบก็เหมือนกับภาพวาดบนแผ่นกระจก

ฉันเชื่อว่าคุณกำลังพยายามทำในสิ่งที่ฉันเพิ่งพยายามทำ: ฉันต้องการผืนผ้าใบซ้อนกันสองผืน ... อันล่างมีภาพนิ่งและอันบนมีสไปรต์ที่เคลื่อนไหวได้ เนื่องจากภาพเคลื่อนไหวคุณต้องล้างพื้นหลังของเลเยอร์บนสุดให้โปร่งใสเมื่อเริ่มการแสดงผลทุกเฟรมใหม่ ในที่สุดฉันก็พบคำตอบ: มันไม่ได้ใช้ globalAlpha และไม่ได้ใช้สี rgba () คำตอบง่ายๆที่มีประสิทธิภาพคือ:

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

ถ้าคุณต้องการให้รายการใด<canvas id="canvasID">โปร่งใสเสมอคุณก็ต้องตั้งค่า

#canvasID{
    opacity:0.5;
}

แต่ถ้าคุณต้องการให้องค์ประกอบบางอย่างในพื้นที่ผ้าใบโปร่งใสคุณต้องตั้งค่าความโปร่งใสเมื่อคุณวาดเช่น

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

เพียงตั้งค่าพื้นหลังของผ้าใบให้โปร่งใส

#canvasID{
    background:transparent;
}

วาดภาพสองผืนของคุณลงบนผืนผ้าใบที่สาม

ฉันมีปัญหาเดียวกันนี้และไม่มีวิธีแก้ไขใดที่สามารถแก้ปัญหาของฉันได้ ฉันมีผ้าใบทึบแสงหนึ่งผืนโดยมีผืนผ้าใบใสอีกผืนอยู่ด้านบน ผืนผ้าใบทึบแสงนั้นมองไม่เห็นอย่างสมบูรณ์ แต่มองเห็นพื้นหลังของเนื้อหาของหน้า ภาพวาดจากผืนผ้าใบใสด้านบนสามารถมองเห็นได้ในขณะที่ผืนผ้าใบทึบแสงด้านล่างไม่ปรากฏ

ไม่สามารถแสดงความคิดเห็นในคำตอบสุดท้ายได้ แต่การแก้ไขนั้นค่อนข้างง่าย เพียงตั้งค่าสีพื้นหลังของผ้าใบทึบแสงของคุณ:

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

ฉันไม่แน่ใจ แต่ดูเหมือนว่าสีพื้นหลังจะได้รับการถ่ายทอดมาจากร่างกายอย่างโปร่งใส