Canvasafbeeldingen laten overlopen
Ik zit een beetje met canvas te prutsen en probeer dmv een gradient 2 afbeeldingen soepel in elkaar te laten overlopen,
Door eerst de afbeelding te tekenen en er vervolgens een vierkant met transparante gradient overheen te tekenen krijg ik op beide afbeeldingen een mooie 'fade-out' effect, als ik ze vervolgens naast elkaar zet dan krijg ik een witte lijn waar de 2 transparante kanten elkaar tegenkomen,
Wat ik zou willen is dat ze elkaar overlappen, maar zodra ik dat probeer gaan de 2 transparante kanten elkaar overlappen.
Wie heeft hier een oplossing voor?
Dit is wat ik nu heb,
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function draw(){
var overloop = 250;
var width = 500;
var height = 500;
var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
var grass = new Image;
var desert = new Image;
grass.src = 'images/tile_grass.jpg';
desert.src = 'images/tile_sand.jpg';
var grad1 = ctx.createLinearGradient(0, 0, overloop, 0);
grad1.addColorStop(1, 'rgba(255,255,255,1)');
grad1.addColorStop(0, 'rgba(0,0,0,0)');
var grad2 = ctx.createLinearGradient(overloop, 0, width, 0);
grad2.addColorStop(0, 'rgba(255,255,255,1)');
grad2.addColorStop(1, 'rgba(0,0,0,0)');
ctx.drawImage(desert, 0, 0, width / 2, height);
ctx.drawImage(grass, width / 2, 0, width / 2, height);
ctx.fillStyle = grad1;
ctx.fillRect(0, 0, width / 2, height);
ctx.fillStyle = grad2;
ctx.fillRect(width / 2, 0, width / 2, height);
}
var overloop = 250;
var width = 500;
var height = 500;
var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
var grass = new Image;
var desert = new Image;
grass.src = 'images/tile_grass.jpg';
desert.src = 'images/tile_sand.jpg';
var grad1 = ctx.createLinearGradient(0, 0, overloop, 0);
grad1.addColorStop(1, 'rgba(255,255,255,1)');
grad1.addColorStop(0, 'rgba(0,0,0,0)');
var grad2 = ctx.createLinearGradient(overloop, 0, width, 0);
grad2.addColorStop(0, 'rgba(255,255,255,1)');
grad2.addColorStop(1, 'rgba(0,0,0,0)');
ctx.drawImage(desert, 0, 0, width / 2, height);
ctx.drawImage(grass, width / 2, 0, width / 2, height);
ctx.fillStyle = grad1;
ctx.fillRect(0, 0, width / 2, height);
ctx.fillStyle = grad2;
ctx.fillRect(width / 2, 0, width / 2, height);
}
Gewijzigd op 14/07/2010 10:02:50 door Johan Dam
Het probleem in wat meer detail,
Transparantie werkt niet op een achtergrond, dit omdat de afbeelding die je genereerd eerst gemaakt word (waar de transparantie dus gegenereerd word) en daarna pas ergens neergezet word, omdat het niet bekend is waar je het wilt neerzetten op het moment dat het gemaakt word, kan het er geen rekening mee houden.
De oplossing,
Ik heb beide afbeeldingen in een aparte canvas getekend (document.createNewElement('canvas') die vervolgens nooit neergezet word)
Daarna de transparantie eroverheen gegooid, en vervolgens de informatie uit beide gehaald met 'ctx.imageGetContents(0,0,w,h)'.
Die twee data waardes ga ik pixel voor pixel bij elkaar optellen en gevolgens - 255 (let erop, niet gedeeld door 2! je wilt het gemiddelde niet, je wilt alleen dat de transparantie 'verdwijnt' en omdat de ene kant van 0 tot 100% transparantie gaat en de andere van 100 tot 0% moet je altijd 100% wit weghalen (omdat de transparantie wit word) en dat is dus 255.
De nieuwe waarde sla je op in een object dat met context.createImageData gemaakt is en die kan je met ctx.putImageData(x,y,w,h) ergens neerzetten waar je wilt.
De code heb ik niet bij de hand, maar voor iedereen die hierin geintresseerd is moet met bovenstaande uitleg + google er wel uitkomen denk ik. zo niet, dan stuur je maar een PM.