2010-02-13 19 views
6

Zajmuję się tworzeniem aplikacji pędzla w javascript przy użyciu pliku processing.js Używa ona obiektu canvas. Chcę zachować obraz w tle płótna. Narysuj coś na pierwszym planie. I podczas zapisywania potrzebuję uzyskać tylko dane pierwszego planu.Czy można utworzyć przezroczyste płótno?

W tym celu musimy uczynić obiekt canvas przezroczystym, aby obraz był widoczny.

Nie widzę żadnej opcji, aby płótno było przezroczyste. Jak mogę to zrobić?

+3

odpowiedziałeś poniżej? – Ross

+1

Prawidłowa odpowiedź brzmi: Jared's. Czemu? Ponieważ oryginalny plakat powiedział, że musi to zrobić z * ProcessingJS *, który renderuje wszystkie elementy canvas z szarym tłem jako * default *. Chce nadpisać to domyślne zachowanie. – YOMorales

Odpowiedz

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

jest wszystko, czego potrzeba =)

Pamiętaj, że możesz użyć CSS stylizacji na obiekcie płótnie.

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"; 
0

dlaczego nie umieścić obrazu w obszarze roboczym i nie wykonywać przezroczystych ruchów i wypełnień?

6

<canvas> jest domyślnie przezroczysty.

Zrobiłem dowodu koncepcji, które można znaleźć tutaj:

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

sprawdzone pod kątem IE6, IE7, IE8, Firefox 2 Firefox 3, Chrome i iPhone.

+2

Działa to przy użyciu innych bibliotek/interfejsów API. Zauważ, że oryginalny plakat powiedział, że musi to zrobić z * ProcessingJS *, który renderuje wszystkie elementy canvas z szarym tłem jako * default *. Chce nadpisać to domyślne zachowanie. Odpowiedź Jareda jest właściwie poprawna. – YOMorales

+0

Masz rację. Tęsknię za interpretacją pytania. –

+0

Nie ma problemu. Często popełniam błędy. ;) – YOMorales

13

Jeszcze lepiej, na szczycie swoich PJS prostu umieścić:

/* @pjs transparent=true; */ 

... a następnie w pętli Draw:

background(0, 0, 0, 0); 

voila!

+4

Prawidłowa odpowiedź podczas korzystania z * ProcessingJS *. To także rozwiązało moje problemy. – YOMorales

Powiązane problemy