Jak zmienić krycie (Alfa, przezroczystość) elementu w elemencie canvas po jego narysowaniu?
Używając elementu HTML5 <canvas>, chciałbym załadować plik obrazu (PNG, JPEG, itp.), narysuj go na płótnie całkowicie przejrzyście, a następnie blaknij. Wymyśliłem, jak załadować obraz i narysować go na płótnie, ale nie wiem, jak zmienić jego krycie po narysowaniu.
Oto kod jaki 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ś mógłby wskazać mi właściwy kierunek jak właściwość do Ustawienia lub funkcję do wywołania, która zmieni nieprzezroczystość?
7 answers
Szukam również odpowiedzi na to pytanie (aby wyjaśnić, chcę mieć możliwość rysowania obrazu z nieprzezroczystością zdefiniowaną przez użytkownika, np. jak rysować kształty z nieprzezroczystością) jeśli rysujesz z prymitywnymi kształtami, możesz ustawić kolor wypełnienia i obrysu za pomocą Alfy, aby zdefiniować przezroczystość. O ile teraz doszedłem do wniosku, nie wydaje się to mieć wpływu na rysunek obrazu.
//works with shapes but not with images
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
Doszedłem do wniosku, że ustawienie globalCompositeOperation działa z obrazami.
//works with images
ctx.globalCompositeOperation = "lighter";
Zastanawiam się, czy jest jakiś trzeci sposób ustawiania kolorów, abyśmy mogli odcień obrazów i uczynić je przezroczyste łatwo.
EDIT:
Po dalszych poszukiwaniach doszedłem do wniosku, że możesz ustawić przezroczystość obrazu, ustawiając parametr globalAlpha przed narysowaniem obrazu:
//works with images
ctx.globalAlpha = 0.5
Jeśli chcesz osiągnąć efekt zanikania w czasie potrzebujesz jakiejś pętli, która zmienia wartość alfa, jest to dość proste, jednym ze sposobów na osiągnięcie tego jest funkcja setTimeout, poszukaj tego, aby utworzyć pętlę z które z czasem zmieniasz Alfę.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-05 06:20:34
Jakiś prostszy przykładowy kod do użycia globalAlpha:
ctx.save();
ctx.globalAlpha = 0.4;
ctx.drawImage(img, x, y);
ctx.restore();
Jeśli potrzebujesz img do załadowania:
var img = new Image();
img.onload = function() {
ctx.save();
ctx.globalAlpha = 0.4;
ctx.drawImage(img, x, y);
ctx.restore()
};
img.src = "http://...";
Uwagi:
Ustaw
'src'last, aby zagwarantować, że twój program obsługionloadjest wywoływany na wszystkich platformach, nawet jeśli obraz jest już w pamięci podręcznej.Zawijanie zmian do rzeczy takich jak
globalAlphapomiędzysaveirestore(w rzeczywistości używaj ich dużo), aby upewnić się, że nie klękasz ustawień z innego miejsca, szczególnie gdy bity kodu rysowania będą dzwonił z wydarzeń.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-05 11:37:15
Edit: odpowiedź oznaczona jako "poprawna" nie jest poprawna.
<!DOCTYPE HTML>
<html>
<head>
<script>
var canvas;
var context;
var ga = 0.0;
var timerId = 0;
function init()
{
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
timerId = setInterval("fadeIn()", 100);
}
function fadeIn()
{
context.clearRect(0,0, canvas.width,canvas.height);
context.globalAlpha = ga;
var ie = new Image();
ie.onload = function()
{
context.drawImage(ie, 0, 0, 100, 100);
};
ie.src = "ie.jpg";
ga = ga + 0.1;
if (ga > 1.0)
{
goingUp = false;
clearInterval(timerId);
}
}
</script>
</head>
<body onload="init()">
<canvas height="200" width="300" id="myCanvas"></canvas>
</body>
</html>
Kluczem jest właściwość globalAlpha.
Przetestowano z IE 9, FF 5, Safari 5 i Chrome 12 na Win7.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-23 14:21:50
Post jest stary na razie pójdę z moją sugestią. Sugestia opiera się na manipulacji pikselami w kontekście canvas 2d. Z MDN:
Można bezpośrednio manipulować danymi pikseli w płótnach na poziomie bajtów
Do manipulowania pikselami użyjemy tutaj dwóch funkcji-getImageData i putImageData
Użycie funkcji GetImageData:
Var myImageData = context.getImageData (left, top,width, height);
I składnia putImageData:
Kontekst.putImageData (myImageData, dx, dy); / / przesunięcie dx, dy - X i y na płótnie
Gdzie kontekst jest kontekstem płótna 2D
Aby uzyskać wartości red green blue I alpha, wykonamy następujące czynności:
var r = imageData.data[((x*(imageData.width*4)) + (y*4))];
var g = imageData.data[((x*(imageData.width*4)) + (y*4)) + 1];
var b = imageData.data[((x*(imageData.width*4)) + (y*4)) + 2];
var a = imageData.data[((x*(imageData.width*4)) + (y*4)) + 3];
Gdzie x jest przesunięciem x, y jest przesunięciem y na płótnie
Więc mamy Kod robiący obraz półprzezroczysty
var canvas = document.getElementById('myCanvas');
var c = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
c.drawImage(img, 0, 0);
var ImageData = c.getImageData(0,0,img.width,img.height);
for(var i=0;i<img.height;i++)
for(var j=0;j<img.width;j++)
ImageData.data[((i*(img.width*4)) + (j*4) + 3)] = 127;//opacity = 0.5 [0-255]
c.putImageData(ImageData,0,0);//put image data back
}
img.src = 'image.jpg';
Możesz stworzyć własne "shadery" - zobacz pełny artykuł MDN tutaj
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-24 23:18:31
Możesz. Przezroczyste płótno może być szybko wyblakłe za pomocą globalnej operacji kompozytowej destination-out . Nie jest w 100% idealny, czasami pozostawia pewne ślady, ale może być poprawiony, w zależności od tego, co jest potrzebne (tj. użyj 'Source-over' i wypełnij go białym kolorem alfą przy 0.13, a następnie zniknij, aby przygotować płótno).
// Fill canvas using 'destination-out' and alpha at 0.05
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
ctx.beginPath();
ctx.fillRect(0, 0, width, height);
ctx.fill();
// Set the default mode.
ctx.globalCompositeOperation = 'source-over';
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-29 09:55:37
Jeśli używasz biblioteki jCanvas możesz użyć właściwości nieprzezroczystość Podczas rysowania. Jeśli potrzebujesz efektu zanikania, po prostu przerysuj różne wartości.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-09 00:06:44
Nie możesz. to grafika w trybie natychmiastowym. Ale możesz go symulować, rysując na nim prostokąt w kolorze tła z nieprzezroczystością.
Jeśli obraz jest nad czymś innym niż stały kolor, to staje się nieco trudniejszy. Powinieneś być w stanie korzystać z metod manipulacji pikselami w tym przypadku. Po prostu zapisz obszar przed narysowaniem obrazu, a następnie połącz go z powrotem z kryciem.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-03-16 18:47:15