HTML5 - Zmień krycie remisem Prostokąt

Powiedzmy rysuję element HTML5 prostokąta przy użyciu tego:HTML5 - Zmień krycie remisem Prostokąt

context.clearRect(25, 72, 32, 32);

Jak chciałbym zrobić to 50% przezroczysty?

Źródło

2012-05-07 nn2

Użyj globalAlpha. Będziesz także musiał rysować za pomocą fillRect. clearRect po prostu usuwa piksele. Nie można go częściowo wymazać, więc będziesz musiał użyć fillRect lub innych prymitywów do rysowania.

z w3schools.com:

ctx.globalAlpha = 0.2; 
    ctx.fillRect(50,50,75,50); 
    ctx.globalAlpha = 1.0;

Źródło

2012-05-07 19:43:34

To sprawia, że całe płótno przezroczysty (Chrome conajmniej) –

Brian, nie wyczyścić całe płótno, tylko rozmiar i położenie ją podać . Oto te 4 liczby; pierwsze dwa to współrzędna X na płótnie, a następnie Y coordin., a następnie rozmiar X i Y prostokąta, który chcesz usunąć. (Należy pamiętać, że wartości Y zwiększają się w miarę jak spadają, w kanwie) –

Należy pamiętać, że po tych dwóch wierszach należy wywołać 'ctx.globalAlpha = 1;', aby uniemożliwić dalsze wywoływanie ciągów (nawet poprzednie jedni, wierzcie lub nie) z częściowo przejrzystych. –

clearRect usuwa to, co było i pozostawia to pole puste. Najlepszym sposobem jest użycie wartości fillStyle rgba, ponieważ sprawi ona, że prostokąt (lub jakikolwiek inny kształt, który rysujesz) będzie przezroczysty. Kod będzie:

ctx.fillStyle = 'rgba(225,225,225,0.5)'; 
ctx.fillRect(25,72,32,32);

(dzięki How to change the opacity (alpha, transparency) of an element in a canvas element after it has been drawn?)

Źródło

2013-07-03 22:36:12

Preferuję to nad wybraną odpowiedzią, ponieważ nie wpływa ona globalnie na cały rysunek po użyciu. –

Możesz zapisać i przywrócić kontekst, aby nie wpłynął globalnie, używając 'ctx.save()' i 'ctx.restore()' owiniętych wokół innych zmian kontekstu. –

Wolę to od najpopularniejszego, ponieważ jest bardziej konkretny: mówi o przejrzystości wypełnienia (chcę "wyczyścić" prostokąt), a nie o przejrzystości jakiejkolwiek operacji. Dwa rozwiązania wymagają 4 wierszy (ponieważ ctx.save() i ctx.restore() w celu zachowania kontekstu). W każdym razie oba rozwiązania są dla mnie dobre. – ddcovery

HTML5 - Zmień krycie remisem Prostokąt

Odpowiedz

Powiązane problemy