kostenloser Webspace werbefrei: lima-city


Hochzählen auf 450 und wieder runter.

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    Hallo, ich wollte mir gerade eine funktion schreiben, die X rauf auf 900 zählt, aber y nur auf 450, also bis zur mitte, danach wieder runter auf 0.

    Ich dachte mir das so:
    <html>
    <head>
    <script>
    function count(){
    var x = 0;
    var y = 0;
    while (y <= 450) {
    	x++;
    	y++;
    
    }while(x <= 900){
    	x++;
    	y-1;
    
    }
    }
    </script>
    </head>
    <body onload="count()"></body>
    </html>


    Wer kann mir weiterhelfen? Danke.
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. m**********n

    Du hast kein Problem formuliert. Du hast aber in der letzten Zeile einen Fehler:
    Anstatt
    y-1;

    Schreibst du
    y--;


    Dann sollte es gehen., auch wenn mir der Sinn des Scripts verborgen bleibt.

    Lg

    mator
  4. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    mator-kaleen schrieb:
    Schreibst du
    y--;



    Das hatte ich zuerst. -- funktioniert echt? Okey, danke, ich versuchs mal.



    EDIT:

    Sinn:
    <html>
    <body>
    	<center><canvas id="Diagramm" height="500" width="900" style="border: 3px solid black">Ihr Browser unterstützt kein Canvas</canvas>
    	<br><button onClick="count(event);">Start</button></center>
    
    
    
    <script>
    var canvas = document.getElementById('Diagramm');
    var context = canvas.getContext('2d');
    
    function count(event){
    var x = 0;
    var y = 0;
    while (y <= 450) {
    	context.moveTo(x, y);
    	context.lineTo(x, y);
    	context.stroke();
    
    	x++;
    	y++;
    
    }while(x <= 900){
    	context.moveTo(x, y);
    	context.lineTo(x, y);
    	context.stroke();
    	
    	x++;
    	y--;
    
    }
    }
    </script>
    
    
    
    </body>
    </html>


    Eine Kurve mit Canvas zeichnen, will aber nicht funktionieren und ich finde den Fehler nicht.

    Beitrag zuletzt geändert: 27.12.2012 19:24:57 von c143
  5. Hallo,

    das ist nicht weiter verwunderlich, da du immer den Cursor auf den Punkt ziehst, welchen du als nächstes mit einer Linie verbinden willst.
    Hier wäre die korrektere Lösung, wobei die auch nicht optimal ist, aber deine Problem behebt. (Ich habe mir erlaubt deine Schleifen zusammenzufassen)
    var canvas = document.getElementById('Diagramm');
    var context = canvas.getContext('2d'); 
    function count(event){
        var x = 0;
        var y = 0;
        context.moveTo(x, y);
        for(; x <= 900; x++){
            context.lineTo(x, y);
            x < 450 ? y++ : y--;
        }
        context.stroke();
    }
    Mit freundlichen Grüßen
    * Edit kleinen Fehler behoben ;-)

    Beitrag zuletzt geändert: 28.12.2012 22:15:02 von nemoinho
  6. nemoinho schrieb:
    Hallo,

    das ist nicht weiter verwunderlich, da du immer den Cursor auf den Punkt ziehst, welchen du als nächstes mit einer Linie verbinden willst.
    Hier wäre die korrektere Lösung, wobei die auch nicht optimal ist [...]
    Auch wenn ich nichts von Canvas verstehe, so glaub ich doch, dass es
    for(x = 0; x <= 900; x++)
    statt
    for(; x <= 900; x++)
    heißen muss, aber das fallt dem TE bestimmt auf, wollte nur darauf hinweisen ^^
    Schöne Feiertage :prost:

    Beitrag zuletzt geändert: 29.12.2012 15:00:53 von limabone
  7. m******e

    limabone schrieb:
    Auch wenn ich nichts von Canvas verstehe, so glaub ich doch, dass es
    for(x = 0; x <= 900; x++)
    statt
    for(; x <= 900; x++)
    heißen muss

    Nö, muss es nicht, weil x ja bereits definiert wurde.
    function count(event){
        var x = 0;
    Die Lösung von nemoinho funktioniert perfekt.
    Siehe hier
  8. Wieder was gelernt :wink:
    Funktioniert tatsächlich :thumb:
  9. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    Vielen Dank Leute, hab was dazugelernt und bin weiter gekommen. Jetzt wollte ich es mit der Formel selbst ausprobieren:

    <html>
    <body>
    	<center><canvas id="Diagramm" height="500" width="900" style="border: 3px solid black">Ihr Browser unterstützt kein Canvas</canvas>
    	<br><button onClick="wurfparabel();">Start</button></center>
    
    
    
    <script>
    var canvas = document.getElementById('Diagramm');
    var context = canvas.getContext('2d');
    
    function wurfparabel(){
    
    	var m		= 10000; //Masse in Gramm
    	var v0		= 3; //Anfangsgeschwindgkeit in m/s
    	var winkel	= 20; //Winkel in Grad
    	var h		= 1; //Hoehe in m
    	var g		= 9.81; //Gravitationskonstante
    
    	var mPixel	= (-g/v0*(0/(2*winkel))^2+0/(2*winkel)*2*winkel+h)/900;
    	var x1		= 0;
    	var x		= x1*mPixel;
    	var y		= -g/v0*(x/(2*winkel))^2+x/(2*winkel)*2*winkel+h;
    	
    
    	context.moveTo(x, y);
    	for(; x1 <= 900; x1++){
        context.lineTo(x, y);
        context.stroke(); 
        }
        }
    </script>
    
    
    
    </body>
    </html>



    Aber gibt mir nichts aus, findet jemand den Fehler? :/



    EDIT: mPixel sind als Erklärung die Meter pro Pixel. Also habe ich zuerst ausgerechnet wie lange der Ball fliegt, danach auf die 900 Pixel des Canvas aufgeteilt, und dann rechne ich x*mPixel.

    EDIT2: Hab noch nen kompletten Denkfehler in der Rechnung gefunden. Wird behoben.

    Beitrag zuletzt geändert: 31.12.2012 14:11:13 von c143
  10. Hallo,

    wiedermal eine große Hilfeleistung, da wir jetzt wissen, was du haben willst, ein Programm, welches Wurfkurven zeichnet, hier mal eine umfangreiche Lösung dazu:
    <!DOCTYPE html>
    <html lang="de-DE">
    <head>
    	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    	<meta http-equiv="Content-Language" content="de-DE" />
    	<title>Wurfparabel</title>
    	<style type="text/css">
    		canvas { display:block; margin:0 auto; border:3px solid #000; }
    		div { text-align:center; }
    	</style>
    </head>
    <body>
    	<div>
    		<canvas id="diagramm" width="900" height="500">Ihr Browser unterstützt kein Canvas</canvas>
    	</div>
    	<script type="text/javascript">
    		var d = document,
    			$ = function(a){return d.getElementById(a)},
    			canvas = $('diagramm'),
    			context = canvas.getContext('2d'),
    			drawCurve = function(){
    				var	height = canvas.height, // Helfer, damits schneller wird.  
    					width = canvas.width,
    					v0 = ($('startspeed').value || 1) * 1, // Anfangsgeschwindigkeit in m/s
    					angle = ($('startangle').value || 45) * 1, // Winkel in DEG
    					h = ($('startheight').value || 0) * 1, // Höhe in m
    					g = 9.81, // Erdschwerebeschleunigung
    					yMax, // Wichtig zum Skalieren
    					xMax, // das selbe
    					factor, // Der Skalierungsfaktor
    					x = 0;
    
    				// Winkel umrechen von DEG zu RAD
    				angle = Math.PI/180*angle;
    
    				// yMax und xMax berechnen
    				yMax = h + Math.pow(v0, 2) * Math.pow(Math.sin(angle), 2) / (2 * g),
    				xMax = Math.pow(v0, 2) * Math.sin(2 * angle) / g * (1 + Math.sqrt(1 + 2 * g * h / (Math.pow(v0, 2) * Math.pow(Math.sin(angle), 2)))),
    
    				// Skalierungsfaktor berechnen
    				factor = width / xMax*2;
    				if(height < yMax * factor)
    					factor = height / yMax;
    
    				// Graph zeichnen
    				y = h;
    				canvas.width = canvas.width;
    				context.moveTo(x, height - h * factor);
    				for(;x < width; x++)
    					context.lineTo(x, height - ((h - (g / (2 * Math.pow(v0, 2) * Math.pow(Math.cos(angle), 2))) * Math.pow((x / factor), 2) + (x / factor) * Math.tan(angle))*factor));
    				context.stroke();
    				return false;
    			},
    			// Helfer um HTML zu erstellen
    			create = function(a,b,c){
    				var i,j;
    				a = d.createElement(a);
    				if(b)
    					for(i in b)
    						if(i == 'style')
    							for(j in b[i])
    								a[i][j] = b[i][j];
    						else
    							a[i] = b[i];
    				if(c && (j=c.length) && c+''!==c)
    					for(i=0;i<j;i++)
    						a.appendChild(''+c[i]===c[i]?text(c[i]):c[i]);
    				else if(c && ''+c===c)
    					a.appendChild(text(c));
    				else if(c && c.nodeType)
    					a.appendChild(c);
    				return a;
    			},
    			text = function(a){return d.createTextNode(a)};
    		if(!!context){
    			canvas.parentNode.appendChild(
    				create('form',{onsubmit:drawCurve},[
    						create('p',null,[
    								create('label',null,'Anfangsgeschwindigkeit [m/s]: '),
    								create('input', {id:'startspeed', value:1})
    						]),
    						create('p',null,[
    								create('label',null,'Wurfwinkel [DEG]: '),
    								create('input', {id:'startangle', value:45})
    						]),
    						create('p',null,[
    								create('label',null,'Wurfhöhe [m]: '),
    								create('input', {id:'startheight', value:0})
    						]),
    						create('p',null,[
    								create('input', {type:'submit', value:'Graph zeichnen'})
    						])
    				])
    			);
    		}
    	</script>
    </body>
    </html>


    Mit freundlichen Grüßen
  11. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!