empecher la superposition d'ombres

**Torx26** · 07/04/2012, 19h10

Bonjour,

voici un code qui creer 3 carres, avec une ombre, ayant un cote en commun.

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
 
<!DOCTYPE HTML>
<html>
    <head>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
 
            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style>
        <script>
 
		window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var ctx = canvas.getContext("2d");
 
				ctx.beginPath(); 
				ctx.moveTo(100,100);
				ctx.lineTo(100,200);
				ctx.lineTo(200,200);
				ctx.lineTo(200,100);
				ctx.lineTo(100,100);
				ctx.closePath();
 
				ctx.fillStyle="white";
				ctx.shadowColor="green";
				ctx.shadowBlur=30;
				ctx.fill();
 
 
 
				ctx.beginPath(); 
				ctx.moveTo(200,100);
				ctx.lineTo(300,100);
				ctx.lineTo(300,200);
				ctx.lineTo(200,200);
				ctx.lineTo(200,100);
				ctx.closePath();
 
				ctx.fillStyle="white";
				ctx.shadowColor="red";
				ctx.shadowBlur=30;
				ctx.fill();
 
 
				ctx.beginPath();
				ctx.moveTo(300,100);
				ctx.lineTo(400,100);
				ctx.lineTo(400,200);
				ctx.lineTo(300,200);
				ctx.lineTo(300,100);
				ctx.closePath();
				ctx.stroke();
 
				ctx.fillStyle="white";
				ctx.shadowColor="black";
				ctx.shadowBlur=30;
				ctx.fill();
 
 
				            };
        </script>
    </head>
    <body onmousedown="return false;">
        <canvas id="myCanvas" width="1200" height="600">
        </canvas>
 
    </body>
</html>

J'aimerai savoir comment faire pour que les ombres ne se superposent pas sur les carres.

D'avance merci

**MaitreKaio** · 09/04/2012, 14h10

La seule solution que je vois est de tracer un rectangle colorié en blanc en dernier.
Je te propose cette solution, également moins verbeuse:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
ctx.fillStyle = "white";
ctx.shadowBlur = 30;
 
ctx.shadowColor = "green";
ctx.fillRect(100,100,100,100);
 
ctx.shadowColor = "red";
ctx.fillRect(200,100,100,100);
 
ctx.shadowColor = "black";
ctx.fillRect(300,100,100,100);
 
ctx.shadowColor = null;
ctx.fillRect(100,100,300,100);

**Torx26** · 09/04/2012, 16h28

bonjour,
merci de votre attention. je vais essayer votre methode.
J'ai essyer avec ctx.globalCompositeOperation = "xor";mais je n'arrive au resultat que je souhaite qu'avec 2 formes avec 3 cela ne marche plus.

empecher la superposition d'ombres

JavaScript

Vue hybride

Discussions similaires

Partager

Partager