Hochzählen auf 450 und wieder runter.
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
browser
code
cursor
dank
diagramm
fehler
hilfeleistung
kompletten denkfehler
kurve
meter
mitte
pixel
problem
programm
punkt
rechnung
sinn
start
url
wiedermal
-
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. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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 -
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 -
nemoinho schrieb:
Auch wenn ich nichts von Canvas verstehe, so glaub ich doch, dass es
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 [...]
stattfor(x = 0; x <= 900; x++)
heißen muss, aber das fallt dem TE bestimmt auf, wollte nur darauf hinweisen ^^for(; x <= 900; x++)
Schöne Feiertage
Beitrag zuletzt geändert: 29.12.2012 15:00:53 von limabone -
limabone schrieb:
Auch wenn ich nichts von Canvas verstehe, so glaub ich doch, dass es
stattfor(x = 0; x <= 900; x++)
heißen mussfor(; x <= 900; x++)
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 -
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 -
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
