HTML5 - Thay đổi độ mờ đục của một trận hòa Rectangle

Question

Hãy nói rằng tôi vẽ một yếu tố HTML5 của hình chữ nhật sử dụng này:

context.clearRect(25, 72, 32, 32); 

Làm thế nào tôi có thể làm cho nó 50% trong suốt?

Answer 1

Sử dụng globalAlpha. Bạn cũng sẽ phải vẽ bằng fillRect. clearRect chỉ xóa các pixel. Nó không thể xóa một phần vì vậy bạn sẽ phải sử dụng fillRect hoặc các bản vẽ nguyên thủy khác.

từ w3schools.com:

ctx.globalAlpha = 0.2; 
    ctx.fillRect(50,50,75,50); 
    ctx.globalAlpha = 1.0; 

Answer 2

ClearRect loại bỏ những gì đã có và lá nó trống. Cách tốt nhất là sử dụng giá trị rgba fillStyle vì nó sẽ chỉ tạo hình chữ nhật (hoặc bất kỳ hình dạng nào khác mà bạn đang vẽ) trong suốt. Mã này sẽ là:

ctx.fillStyle = 'rgba(225,225,225,0.5)'; 
ctx.fillRect(25,72,32,32); 

(nhờ How to change the opacity (alpha, transparency) of an element in a canvas element after it has been drawn?)