JavaScript Canvas - thay đổi độ mờ của hình ảnh

Question

Tôi đang cố gắng tạo trò chơi nền tảng trong Canvas. Tôi có nhân vật chính và một số kẻ thù. Khi người chơi chạm vào kẻ thù, anh ta sẽ mất một số HP và anh ta sẽ không thể chạm tới trong khoảng 3 giây. Bây giờ tôi có một vấn đề. Sau khi mất HP, tôi muốn đặt độ mờ của hình ảnh ký tự thành 0,5 (để hiển thị điều không thể chạm tới).

var mainchar = new Image(); 
    mainchar.src = 'mainch.png'; 

Tôi không muốn sử dụng ctx.globalCompositeOperation = "lighter" hoặc ctx.globalAlpha = 0.5 becouse cả trong số họ thay đổi độ trong suốt của tất cả các yếu tố (đó là toàn cầu). Có cách nào để thay đổi độ mờ của hình ảnh không? Ví dụ 'mainchar.changeopacity'?

Answer 1

Bạn phải thay đổi globalAlpha hoặc vẽ hình ảnh lên canvas ngoài màn hình có tập hợp globalAlpha, sau đó vẽ canvas này lên khung chính.

Chỉ cần đặt alpha, vẽ hình ảnh và đặt lại alpha về độ mờ hoàn toàn. Cài đặt alpha không thay đổi nội dung đã được vẽ lên canvas - nó chỉ áp dụng cho các nội dung tiếp theo (đây sẽ là hình ảnh trong trường hợp này).

Và tất nhiên, bạn luôn có thể chuẩn bị hình ảnh của mình bằng kênh alpha trong trường hợp hình ảnh PNG.

/// only image will have alpha affected: 
context.globalAlpha = 0.5; 
context.drawImage(image, x, y); 
context.globalAlpha = 1.0; 

Answer 2

sử dụng lưu và khôi phục:

canvas.save(); 
canvas.globalAlpha = 0.5; 
.... 
canvas.restore(); //this will restore canvas state