Hallo,
ich arbeite seit kurzem mit dem HTML5 Canvas und bin da auf ein Problem gestoßen bei dem mich interessieren würde ob es da eine einfachere Lösung gibt.
Es geht um folgedes: Ich möchte eine Farbfüllung über eine Grafik legen, die ich in den Context des Canvas gepackt habe. Dabei sollen jedoch nur die Pixel eingefärbt werden, deren Alphawert größer ist als 0.
Zur Zeit sieht mein Code wie folgt aus:
Dabei soll die Grafik 'test.png' in der Farbe rgba(200, 200, 200, 255); eingefärbt werden.
Gibt es da evtl. eine elegantere Lösung für?
Würde mich über eine Antwort freuen.
Viele Grüße
ich arbeite seit kurzem mit dem HTML5 Canvas und bin da auf ein Problem gestoßen bei dem mich interessieren würde ob es da eine einfachere Lösung gibt.
Es geht um folgedes: Ich möchte eine Farbfüllung über eine Grafik legen, die ich in den Context des Canvas gepackt habe. Dabei sollen jedoch nur die Pixel eingefärbt werden, deren Alphawert größer ist als 0.
Zur Zeit sieht mein Code wie folgt aus:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<script>
function init() {
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function()
{
var imageWidth = 320;
var imageHeight = 208;
context.drawImage(imageObj, 0, 0, imageWidth, imageHeight);
var imageData = context.getImageData(
0,
0,
canvas.width,
canvas.height
);
for (var i = 0, n = imageData.data.length; i < n; i += 4)
{
if(imageData.data[i+3] != 0)
{
imageData.data[i] = 200;
imageData.data[i+1] = 200;
imageData.data[i+2] = 200;
imageData.data[i+3] = 255;
}
}
context.putImageData(imageData, 0, 0);
}
imageObj.src = "./test.png";
}
</script>
</head>
<body onload="init()">
<canvas id="myCanvas" width="1578" height="400"></canvas>
</body>
</html>Dabei soll die Grafik 'test.png' in der Farbe rgba(200, 200, 200, 255); eingefärbt werden.
Gibt es da evtl. eine elegantere Lösung für?
Würde mich über eine Antwort freuen.
Viele Grüße
