Korzystając z <canvas>
elementu HTML5 , chciałbym załadować plik obrazu (PNG, JPEG itp.), Narysować go całkowicie na płótnie całkowicie przezroczysto, a następnie go rozjaśnić. Zrozumiałem, jak załadować obraz i narysować go na płótno, ale nie wiem, jak zmienić jego krycie po narysowaniu.
Oto kod, który mam do tej pory:
var canvas = document.getElementById('myCanvas');
if (canvas.getContext)
{
var c = canvas.getContext('2d');
c.globalAlpha = 0;
var img = new Image();
img.onload = function() {
c.drawImage(img, 0, 0);
}
img.src = 'image.jpg';
}
Czy ktoś wskaże mi właściwy kierunek, jak właściwość do ustawienia lub funkcja do wywołania, która zmieni krycie?
canvas
element maglobalAlpha
właściwość, ale kontekst, który otrzymujesz z obszaru roboczego.canvas2d.fillStyle = "rgba(255, 255, 255, 0.5)";
nie działa Wartość musi być szesnastkowa.Prostszy przykładowy kod do użycia
globalAlpha
:Jeśli musisz
img
zostać załadowany:Uwagi:
Ustaw
'src'
ostatni, aby zagwarantować, żeonload
program obsługi jest wywoływany na wszystkich platformach, nawet jeśli obraz jest już w pamięci podręcznej.Zawiń zmiany w rzeczy
globalAlpha
między asave
irestore
(w rzeczywistości używaj ich dużo), aby upewnić się, że nie blokujesz ustawień z innych źródeł, szczególnie gdy fragmenty kodu rysowania będą wywoływane ze zdarzeń.źródło
globalAlpha
niczego nie rozmazuje. Ustawi alfa dla wszystkich kolejnych rysunków (nie zmieni niczego, co już zostało narysowane), dlatego w przykładowym kodzie zawijam gosave
irestore
, aby ograniczyć to, czego dotyczy.Edytować:
Odpowiedź oznaczona jako „poprawna” jest nieprawidłowa.To łatwe do zrobienia. Wypróbuj ten kod, zamieniając „ie.jpg” na dowolne przydatne zdjęcie:
Kluczem jest właściwość globalAlpha.
Testowane z IE 9, FF 5, Safari 5 i Chrome 12 na Win7.
źródło
Wpis jest stary do tej pory, pójdę z moją sugestią. Sugestia oparta jest na manipulacji pikselami w kontekście kanwy 2d. Z MDN:
Do manipulowania pikselami użyjemy tutaj dwóch funkcji - getImageData i putImageData
Użycie funkcji getImageData:
i składnia putImageData:
Gdzie kontekst jest kontekstem kanwy 2d
Aby uzyskać wartości czerwony zielony niebieski niebieski i alfa, wykonamy następujące czynności:
Gdzie x jest przesunięciem x, y jest przesunięciem y na płótnie
Mamy więc kod czyniący obraz półprzezroczystym
Możesz stworzyć własnych „shaderów” - zobacz pełny artykuł MDN tutaj
źródło
Możesz. Przezroczyste płótno można szybko wyblaknąć, korzystając z globalnej operacji kompozytowej docelowej . Nie jest w 100% idealny, czasem pozostawia pewne ślady, ale można go ulepszyć, w zależności od potrzeb (tj. Użyj „over-source” i wypełnij go białym kolorem alfa przy 0,13, a następnie zaniknij, aby przygotować płótno).
źródło
Myślę, że to najlepiej odpowiada na pytanie, w rzeczywistości zmienia wartość alfa czegoś, co już zostało narysowane. Może nie było to częścią interfejsu API, kiedy zadawano to pytanie.
biorąc pod uwagę kontekst 2d
c
.źródło
Jeśli używasz biblioteki jCanvas , podczas rysowania możesz użyć właściwości krycia . Jeśli potrzebujesz dodatkowo efektu zanikania, po prostu przerysuj z różnymi wartościami.
źródło
Nie możesz To grafika w trybie natychmiastowym. Ale możesz to trochę zasymulować, rysując nad nim prostokąt w kolorze tła z nieprzezroczystością.
Jeśli obraz jest nałożony na coś innego niż stały kolor, staje się nieco trudniejszy. W takim przypadku powinieneś być w stanie użyć metod manipulacji pikselami. Po prostu zapisz obszar przed narysowaniem obrazu, a następnie zmiksuj go ponownie z kryciem.
źródło