2011-09-18 11 views
8

Questo piccolo codice chiare dati vecchia tela dell'intervallo:tela fillStyle nell'intervallo con trasparente/opacità

// start interval 
ctx.save(); 
    ctx.fillStyle = "rgba(0, 0, 0, 0.2)"; 
    ctx.fillRect(0, 0, ctx.width, ctx.height); 
ctx.restore(); 
//some draw code for new graph 
... 
//end interval 

La mia area di lavoro diventano neri, perché ho impostato il nero come colore di riempimento (RGBA (0, 0, 0, .2)), ma ho bisogno di uno sfondo trasparente, non nero.

Ho provato a utilizzare globalAlpha e imagePutData ma non sono riuscito.

Come posso fare questo?

+0

Hai provato 'clearRect'? – c69

+0

se cancelli il rect, cancella tutti i vecchi dati, ma ho bisogno di salvare i vecchi dati e impostare l'opacità per questo (che motivo per cui uso rgba color model,) fino a quando l'intervallo lo rende completamente trasparente – user951114

+1

forse imposta 'ctx.globalCompositeOperation = 'destinazione -out'' e poi disegna? – c69

risposta

5

Utilizzo di un rgba(0,0,0,.2) fillStyle e fillRect() funziona per me sia su chrome che su firefox: dipinge un riempimento nero semitrasparente. Assicurati che non stai facendo qualcos'altro che sta causando una vernice opaca di qualche tipo.

2

prova ctx.canvas.width, invece di ctx.width

3

Penso che questo risolverà il problema

ctx.fillStyle = "rgba(255, 255, 255, 0.5)";