html canvas shadow được áp dụng cho mọi thứ

Question

Nếu bạn xác định một bóng ONCE, sau đó nó áp dụng cho tất cả "đồ họa" trên canvas từ sau đó (đó là những gì nó phải làm).

mẫu: http://flanvas.com/development/flanvas/test.html

Có ai biết thực hành tốt nhất để biến cái bóng đi sau khi bạn đã sử dụng nó? Tôi đang thiết lập shadowColor thành "rgba (0,0,0,0)", không có màu đen alpha. Tôi chắc chắn có một cách tốt hơn.

mẫu trường hợp: Văn bản cũng nhận được bóng. Tôi đang sử dụng màu đen không có màu đen để chống lại điều này ngay bây giờ. http://flanvas.com/development/flanvas/examples/filters-dropShadowFilter.html

Answer 1

Bằng cách sử dụng save, translate và restore bạn có thể thực hiện nhiệm vụ của mình mà không lo lắng về những thay đổi phong cách, cho ví dụ.

ctx.save(); 
ctx.translate(X,Y); 

ctx.shadowColor = 'rgba(255, 0, 0, 0.5)'; 

// do some stuff 

ctx.restore(); 

đây X & Y là tọa độ nơi bạn dự định để vẽ và bạn làm công cụ của bạn liên quan đến các tọa độ 0,0.

Phương pháp này giải quyết vấn đề của bộ nhớ đệm và khôi phục lại phong cách/giá trị trước đó và cũng rất hữu ích khi bạn làm việc với gradient như họ luôn âm mưu liên quan đến nguồn gốc (0,0)

Answer 2

Thường là một ý tưởng tốt để lưu trữ giá trị cũ của các loại thuộc tính "toàn cầu" này trước khi bạn thay đổi và sử dụng giá trị được lưu trữ này để khôi phục sau này. Ví dụ:

var origShadowColor = ctx.shadowColor; 
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)'; 

// ... do some stuff 

ctx.shadowColor = origShadowColor; 

Answer 3

(EDIT: Rất tiếc tôi thấy đó là . những gì bạn đã được làm với một màu đen 0 alpha)

Đây là những gì bạn đang tìm kiếm:

context.shadowColor = "transparent";