Web Worker & Repaint canvas

**lolaalol** · 15/12/2012, 18h48

quand je load ma page web, j'ai une function qui va faire un dégradé d'un ciel noir et afficher 6 étoiles au hasard dans le ciel dans un canvas j'ai aussi une image ovni dans mon canvas. Après avoir affiché mon ciel et mes étoiles, je pars un web worker qui va uniquement calculer au hasard des nouvelles positions pour l'ovni et je renvoie ces position dans ma main page. mon problème est que mon ovni ne s'affiche juste pas, je ne sais pas si c'Est le web worker le problème ou le fait que j'essaye de le re dessiner plusieurs fois ...

voici mon web worker :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
var xx = 30;
var yy = 30;
var MAXLARGEUR = 250;
var MAXHAUTEUR = 350;
 
function move()
{
	while(true)
	{
		setTimeout(move,500);
		if(Math.random()* 1 > 0)
		{
			if(xx + 5 < MAXLARGEUR)
				xx = xx + 5;
		}
		else
		{
			if(xx - 5 > 0)
				xx = xx - 5;
		}
		if(Math.random()* 1 > 0)
		{
			if(yy + 5 < MAXHAUTEUR)
				yy = yy + 5;
		}
		else
		{
			if(yy - 5 > 0)
				yy = yy - 5;
		}
		postMessage(xx+yy);
	}
}

voici ce que je fais avant d'appeler mon Web Worker.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<body onload="Init()">
	<canvas id="MonCanVas" width="250" height="350"></canvas>
	<script>
 
		var xx = 30;
		var yy = 30;
		var i = 0;
		var j = 0;
		var h = 115;
		var l = 250;
		var y = 0;
		var x = 0;
		var img = new Image();
		img.src = "images/ovni.png";
 
		var c = document.getElementById("MonCanVas");
		var ctx = c.getContext("2d");
		var grd = ctx.createLinearGradient(0,0,0,350);
		var w;
 
		grd.addColorStop(0,"black");
		grd.addColorStop(1,"royalblue");
 
		ctx.fillStyle=grd;
		ctx.fillRect(0,0,250,350);
		ctx.fillStyle="#FFFFFF";
 
		function Init()
		{
			while(i < 3)
			{
				while(j < 2)
				{
					y = Math.random()* (h - ( h - 114) + 1) + (h - 114);
					x = Math.random()* (250 - 1 + 1)+1;
					ctx.beginPath();
					ctx.arc(x,y,Math.random()* (3 - 1 + 1)+1,0,2*Math.PI);
					ctx.fill();
					j = j + 1;
				}
				j = 0;
				h = h + 115;
				i = i + 1;
			}
			drawImage(img,xx,yy);
			StartWorker();
		}
 
		function StartWorker()
		{
			if(window.Worker)
			{
				var message;
				var worker=new Worker("animate.js");
				worker.onmessage=function(event)
				{
					message = event.data;
					drawImage(img,message.substr(1,2),message.substr(3,4));
				}
			}
			else
			{
				alert("Désolé votre navigateur "+ "ne supporte pas les workers ! ?");
			}
		}
 
		function stopWorker()
		{ 
			w.terminate();
		}
 
	</script>
</body>

**danielhagnoul** · 16/12/2012, 01h03

Bonsoir

Beaucoup d'erreurs, beaucoup de choses bizarres !

Voici une version corrigée des codes qui fonctionne, mais il y a encore du travail sur le tracé des images.

Fichier animate.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
onmessage = function( event ){
    var xx = event.data.XX,
        yy = event.data.YY,
        MAXLARGEUR = 250,
        MAXHAUTEUR = 350;
 
    if ( xx + 5 < MAXLARGEUR ){
        xx += 5;
    } else {
        xx = 30;
    }
 
    if ( yy + 5 < MAXHAUTEUR ){
        yy += 5;
    } else {
        yy = 30;
    }
 
    postMessage({
        "XX" : xx,
        "YY" : yy
    });
}

Code principal à remettre dans init() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
var xx = 30,
	yy = 30,
	i = 0,
	j = 0,
	h = 115,
	l = 250,
	y = 0,
	x = 0,
	img = new Image(),
	c = document.getElementById("MonCanVas"),
	ctx = c.getContext("2d"),
	grd = ctx.createLinearGradient(0,0,0,350),
	w,
	worker = new Worker("animate.js"),
	stopWorker = 10;
 
img.src = "ovni.png";
 
grd.addColorStop(0,"black");
grd.addColorStop(1,"royalblue");
 
ctx.fillStyle=grd;
ctx.fillRect(0,0,250,350);
ctx.fillStyle="#FFFFFF";
 
while(i < 3)
{
	while(j < 2)
	{
		y = Math.random()* (h - ( h - 114) + 1) + (h - 114);
		x = Math.random()* (250 - 1 + 1)+1;
		ctx.beginPath();
		ctx.arc(x,y,Math.random()* (3 - 1 + 1)+1,0,2*Math.PI);
		ctx.fill();
		j = j + 1;
	}
	j = 0;
	h = h + 115;
	i = i + 1;
}
 
ctx.drawImage( img, xx, yy );
 
var objInterval = setInterval( function(){
	stopWorker--;
 
	worker.postMessage({
		"XX" : xx,
		"YY" : yy
	});
 
	if ( stopWorker < 1 ){
		clearInterval( objInterval );
	}
}, 500 );
 
worker.onmessage=function(event){
	xx = event.data.XX;
	yy = event.data.XX;
 
	console.log( stopWorker, xx, yy );
 
	ctx.drawImage( img, xx, yy );
}

**lolaalol** · 16/12/2012, 01h52

Oui je commence tout juste le html5, je préfèrais faire des java applet mais bon cela n'existe plus dans html5...

Je ne comprend pas pourquoi tu as mis un onmessage event dans le animate.js ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
onmessage = function( event ){
    var xx = event.data.XX,
        yy = event.data.YY,

**danielhagnoul** · 16/12/2012, 10h39

Bonjour

Le code principal et le worker communiquent en échangeant des messages. Le worker attend un message du code principal pour se mettre au travail. La valeur des paramètres xx et yy, est modifiée dans le worker et utilisée dans le code principal.

Un worker permet d'exécuter des calculs prenant beaucoup de temps sans bloquer l'utilisateur ou pire le navigateur. L'exécution du worker prend aussi du temps, je crois qu'il ne se justifie que pour des calculs prenant plus de 500 millisecondes. Ce n'est pas le cas ici.

Je vous recommande la documentation de Mozilla : Using web workers

**lolaalol** · 17/12/2012, 16h13

J'ai essayé tes modifications, le code ne plante pas mais mon ovni ne s'affiche pas. On dirait que je le worker ne part pas, j'ai rajouté un alert dans ta function
worker.onmessage=function(event) dans le main code et je ne reçois aucun message. Je fais mes test sous FireFox

**NoSmoking** · 17/12/2012, 19h16

Bonjour,
ne serais ce pas simplement parce que ton "ovni" n'est pas loader?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
38
39
40
41
var img = new Image();
img.src = "ovni.png";
 
// action une fois image chargée
img.onload=function(){
  grd.addColorStop(0,"black");
  grd.addColorStop(1,"royalblue");
 
  ctx.fillStyle=grd;
  ctx.fillRect(0,0,250,350);
  ctx.fillStyle="#FFFFFF";
 
  while(i < 3)
  {
  	while(j < 2)
  	{
  		y = Math.random()* (h - ( h - 114) + 1) + (h - 114);
  		x = Math.random()* (250 - 1 + 1)+1;
  		ctx.beginPath();
  		ctx.arc(x,y,Math.random()* (3 - 1 + 1)+1,0,2*Math.PI);
  		ctx.fill();
  		j = j + 1;
  	}
  	j = 0;
  	h = h + 115;
  	i = i + 1;
  }
 
  ctx.drawImage( img, xx, yy );
 
  var objInterval = setInterval( function(){
  	stopWorker--;
  	worker.postMessage({
  		"XX" : xx,
  		"YY" : yy
  	});
  	if ( stopWorker < 1 ){
  		clearInterval( objInterval );
  	}
  }, 500 );
};

Web Worker & Repaint canvas

JavaScript

Vue hybride

Discussions similaires

Partager

Partager