Có thể tạo canvas trong suốt

Question

Tôi đang phát triển một ứng dụng cọ vẽ trong javascript bằng cách sử dụng processing.js Nó đang sử dụng đối tượng canvas. Tôi muốn giữ một hình ảnh ở nền của khung vẽ. Vẽ một cái gì đó ở phía trước. Và trong khi tiết kiệm, tôi chỉ cần lấy dữ liệu tiền cảnh.

Để làm điều đó, chúng tôi cần phải làm cho đối tượng canvas trong suốt để hình nền hiển thị.

Tôi không thấy bất kỳ tùy chọn nào để làm cho khung trong suốt. Làm thế nào để làm điều đó?

Answer 1

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

là tất cả các bạn cần =)

Hãy nhớ rằng bạn có thể sử dụng phong cách CSS trên đối tượng canvas.

canvas.style.position = "absolute"; 
canvas.style.left = the x position of the div you're going over +"px"; 
canvas.style.top = the y position of the div you're going over + "px"; 

Answer 2

tại sao không đặt hình ảnh trong canvas và làm cho nét vẽ của bạn và lấp đầy trong suốt?

Answer 3

<canvas> là minh bạch theo mặc định.

Tôi đã thực hiện một bằng chứng của khái niệm có thể được tìm thấy ở đây:

http://irae.pro.br/lab/canvas_pie_countdown/

Tested chống lại IE6, IE7, IE8, Firefox 2, Firefox 3, Chrome và iPhone.

Answer 4

Thậm chí tốt hơn, ở phía trên cùng của PJS bạn chỉ cần đặt:

/* @pjs transparent=true; */ 

... và sau đó trong vòng lặp bốc thăm của bạn:

background(0, 0, 0, 0); 

thì đấy!