Problem mit einem Canvas-Skript

- WebmasterWork »
- Grafik & Programmierung »
- (X)HTML & CSS & DHTML & Javascript »
- Problem mit einem Canvas-Skript »

Flo_W95

Doppel-As

Dabei seit: 27.09.2010

Beiträge: 114

Freitag, 21. Januar 2011, 00:28

Hallo!
Ich hab heute angefangen mit HTML 5 <canvas> tags rumzuexperimentieren und bin zu einem Fehler gekommen, den ich nicht selbst beheben kann.
mein Canvas Skript soll einen Kreis erzeugen ( koordinaten 100,100 ) der radius soll aber von 0-50px schwanken. den kreis großer zu machen hab ich schon hingekriegt, aber ich finde keine möglichkeit ihn wieder kleiner zu machen.
Der Fehler muss irgendwo bei dem ani_size - 1 stecken. JavaScript mag das - 1 nicht. warum auch immer...

Spoiler
HTML
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
<html>
	<head>
		<title>Canvas tutorial</title>
		<script type="text/javascript">
			var ani_size = 0;
			var ani_change = "down";
			
			function draw(){
				var canvas = document.getElementById('canvas');
				if (canvas.getContext){
					ctx = canvas.getContext('2d');
				}
				setInterval("ani();",40);
			}
			
			function ani(){
				ctx.clearRect(0,0,500,500);
				ctx.fillStyle = "#444";
				if(ani_change == "up" && ani_size >= 20){
					ani_change = "down";
				}
				else if(ani_change == "down" && ani_size <= 0){
					ani_change = "up";
				}
				
				if(ani_change == "up"){
					var n = eval(ani_size+1);
					ani_size = n;
				}
				else{
					var n = eval(ani_size-1);
					ani_size = n;
				}
				
				ctx.arc(100,100,ani_size,0,Math.PI*2, true);
				ctx.fill();
			}
		</script>
		<style type="text/css">
			canvas{
				border: 1px solid black;
			}
		</style>
	</head>
	<body onload="draw();">
		<canvas id="canvas" width="500" height="500"></canvas>
	</body>
</html>

Auch im Internet erreichbar unter: http://93.181.39.145/canvas/
hoffe ihr findet meinen Fehler - Hab da mindestens ne dreiviertelstunde ratlos gesucht und nichts gefunden...

Ich habe keine Homepage

Mckbrother

Haudegen

Dabei seit: 04.02.2010

Beiträge: 515

Freitag, 21. Januar 2011, 00:34

Ohne jetzt die mega-Ahnung von HTML5 noch Canvas zu haben würde ich darauf tippen, dass Du das Script ja nur einmal ausführst.
Ich würde es in eine Schleife einbauen, das es sich wiederholt.
Wiegesagt, ist es nur eine Vermutung

Gruß Mckbrother.

PS: Berichtigt mich falls nötig

Wo kämen wir hin,
wenn jeder sagen würde:
"wo kämen wir hin",
und niemand ginge um zu schauen,
wohin wir kämen,
wenn wir gingen.

Flo_W95

Doppel-As

Dabei seit: 27.09.2010

Beiträge: 114

Freitag, 21. Januar 2011, 00:55

Nein das Skript wird per setInterval ausgeführt, und zwar alle 40millisekunden.

Ich habe keine Homepage

lorenz

Haudegen

Dabei seit: 05.11.2002

Beiträge: 647

Freitag, 21. Januar 2011, 02:26

als erstes würde ich den fillStlye beim initaliesiern setzen da du ihn ja in der animation nie änderst

Spoiler
Javascript-Quelltext
1
2
3
4
5
6
7
8
9
function draw(){
				var canvas = document.getElementById('canvas');
				if (canvas.getContext){
					ctx = canvas.getContext('2d');
					ctx.fillStyle = "#00ab25"; //<--hier schon fill style setzen
					
				}
				setInterval("ani();",40);
			}

hier unten hast du einfach nur die pfade vergessen damit hat er die alten kreise immer wieder mitgemal und es sah so aus als wenn sie nicht wieder kleiner werden weil halt die maximale größe immer mitgezeichnet wurde

Spoiler
Javascript-Quelltext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function ani(){
				ctx.clearRect(0,0,500,500);

				if(ani_change == "up" && ani_size >= 20){
					ani_change = "down";
				}
				else if(ani_change == "down" && ani_size <= 0){
					ani_change = "up";
				}
				
				if(ani_change == "up"){
					ani_size++; //<--für was waren die evals hier oO?
				}
				else{
					ani_size--; //<--für was waren die evals hier oO?
				}
				
				ctx.beginPath(); //hier passiert die magie ;)
				ctx.arc(100,100,ani_size,0,Math.PI*2, true);
				ctx.closePath(); // und hier
				ctx.fill();
			}

mfG LA

Flo_W95

Doppel-As

Dabei seit: 27.09.2010

Beiträge: 114

Freitag, 21. Januar 2011, 18:58

Danke Danke Danke Danke xD
jetz klappt es. die Evals waren nur ein Test, wollte die eigetnlich wieder entfernen

Ich habe keine Homepage

Problem mit einem Canvas-Skript

HTML

Javascript-Quelltext

Javascript-Quelltext

Ähnliche Themen