Làm cách nào để tạo canvas trong suốt trong html5?

Làm cách nào để tạo canvas trong suốt? Tôi cần phải làm như vậy vì tôi muốn đặt hai bức tranh sơn dầu chồng lên nhau.

Theo mặc định, bạt là trong suốt.

Hãy thử đặt một hình nền của trang, sau đó đặt một canvas lên trên nó. Nếu không có gì được vẽ trên canvas, bạn hoàn toàn có thể nhìn thấy nền trang.

Hãy nghĩ về một bức tranh canvas giống như bức tranh trên một tấm kính.

Tôi tin rằng bạn đang cố gắng làm chính xác những gì tôi vừa cố gắng làm: Tôi muốn hai bức tranh xếp chồng lên nhau ... bức dưới cùng có hình ảnh tĩnh và bức trên cùng chứa hình ảnh động. Do hoạt ảnh, bạn cần xóa nền của lớp trên cùng thành trong suốt khi bắt đầu hiển thị mọi khung hình mới. Cuối cùng tôi đã tìm ra câu trả lời: nó không sử dụng globalAlpha và nó không sử dụng màu rgba (). Câu trả lời đơn giản, hiệu quả là:

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

Nếu bạn muốn một cụ <canvas id="canvasID">thể luôn trong suốt, bạn chỉ cần đặt

#canvasID{
    opacity:0.5;
}

Thay vào đó, nếu bạn muốn một số yếu tố cụ thể bên trong vùng canvas trở nên trong suốt, bạn phải đặt độ trong suốt khi vẽ, tức là

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

Chỉ cần đặt nền của canvas thành trong suốt.

#canvasID{
    background:transparent;
}

Sơn hai bức tranh của bạn lên bức tranh thứ ba.

Tôi đã gặp vấn đề tương tự và không có giải pháp nào ở đây giải quyết được vấn đề của tôi. Tôi có một tấm vải mờ đục với một tấm vải trong suốt khác bên trên nó. Phần canvas mờ đục hoàn toàn không thể nhìn thấy nhưng có thể nhìn thấy nền của phần thân trang. Các bản vẽ từ canvas trong suốt ở trên có thể nhìn thấy được trong khi canvas mờ bên dưới thì không.

Không thể bình luận câu trả lời cuối cùng nhưng cách khắc phục tương đối dễ dàng. Chỉ cần đặt màu nền của canvas mờ đục của bạn:

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

Tôi không chắc nhưng có vẻ như màu nền được thừa hưởng như trong suốt từ phần thân.