Canvas Diagram (Y Einteilung, Y Dynamisch)

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

14:30, 23.2.2013

Hallo,
vor einiger Zeit habe ich mit einem Wurfparabelrechner mit Diagram begonnen, aber hatte bis jetzt keine Zeit mehr um weiter zu machen. Es gibt noch zwei Probleme, die ich einfach nie hinbekomme, bevor ich mit den restlichen Funktionen weiter machen kann.

Eigentlich sind es zwei Probleme in einem, und zwar liegt es an der Y-Achse. Ich erläutre das mit einem Bild.

http://f.cl.ly/items/3h1b3S1D0w1r2g0m053D/Bildschirmfoto%202013-02-23%20um%2014.24.56.png

Die Abstände müssen immer gleich sein, und da Y-Max nicht beim Canvas Höchstpunkt liegt, geht das nicht auf.

Der Code ist

<!DOCTYPE html>
<html>
<body onload="rahmen()">
<div style="text-align: center;">
<canvas id="Diagramm" height="520" width="940">Ihr Browser unterstützt kein Canvas</canvas><br />
<form id="ball_form"><input id="ball_slider" type="range" min="0" max="100" value="0" style="width:900px;" onchange="ball(this.value);"><br>
<input type="button" value="Start" onClick="reset(); wurfparabel(); ball(ball_slider_value);"></input>
<input type="button" value="Reset" onClick="reset();"></input>
</div><form>

<div>
Insgesammte Zeit:	<span id="zeit">0</span><br>
Insgesammter Weg:	<span id="weg">0</span><br>
Höchster Punkt:		<span id="ymax">0</span>
Aktueller Weg(x):	<span id="currentx">0</span><br>
Aktueller Weg(y):	<span id="currenty">0</span><br>
Aktuelle Zeit:		<span id="currentt">0</span><br>

</div>



<script type="text/javascript">
//Y Achse stimmt immernoch nicht, wegen ymax = höchstpunkt und nicht letzer strich.


var ball_slider_value = document.getElementById('ball_slider').getAttribute('value');





var canvas = document.getElementById('Diagramm');
var context = canvas.getContext('2d');
	
// Variabeln //


//Anfangsangaben
	var v0 = 15.0; // Anfangsgeschwindgkeit in m/s
	var angle = 45.0; // angle in Grad
	var angle = Angle(angle);
	var h = 5.0; // Hoehe in m
	var g = 9.81; // Gravitationskonstante

//Geschwindigkeiten
	var yv = v0 * Math.sin(angle);
	var xv = v0 * Math.cos(angle);
	
// Gewünschte Ergebnise
	var t =		(-yv - Math.sqrt(Math.pow(yv, 2) - 4 * (-g / 2) * h)) / (-g); // Mitternachtsformel. -gt²/2 + yv * t + h = 0, positive Lösung
	var xs =	xv * t;
	var ymax = 	(((Math.pow((Math.sin(angle)*v0),2))/(2*g)))+h;
	
// Skalierung
	var steps = 100; //Genauigkeit
	
	var ymaxpixel	= ymax * scale; //Pixel für ymax
	
	//Canvas
	var canvas_height	= 500;
	var canvas_width	= 900;
	var canvas_rand		= 20;
	var canvas_strich_laenge = 10;
	
	//Rahmen
	StricheY			= canvas_height / 100;
	StricheX			= canvas_width / 100;

if(ymax > xs) var scale = canvas_height / ymax;
else var scale = canvas_width / xs;

function pixel_height(pixel){
	return canvas_height - pixel;
}
function pixel_width(pixel){
	return (canvas_rand + pixel);
}



function reset(){
context.clearRect(0,0,canvas.width,canvas.height);
rahmen();
		document.getElementById('weg').innerHTML 	= 0;
		document.getElementById('zeit').innerHTML 	= 0;
		document.getElementById('currentx').innerHTML 	= 0;
		document.getElementById('currenty').innerHTML 	= 0;
		document.getElementById('currentt').innerHTML 	= 0;
		document.getElementById('ymax').innerHTML 	= 0;
}

function rahmen(){
	context.strokeStyle = 'black';	
	context.lineWidth = 2;
	
//Rahmenlinien//
	context.beginPath();
	context.moveTo(pixel_width(0),0);//Höhe
	context.lineTo(pixel_width(0),canvas_height);
	context.lineTo(canvas_rand - canvas_strich_laenge,canvas_height + canvas_strich_laenge);// 0-Punkt
	context.moveTo(pixel_width(0),canvas_height);//Breite
	context.lineTo(pixel_width(canvas_width),canvas_height);

//Striche//

//Breite
	for(var o = 1; o <= StricheX; o++) {
	context.moveTo(pixel_width(canvas_width / StricheX * o),canvas_height);
	context.lineTo(pixel_width(canvas_width / StricheX * o),canvas_height + canvas_strich_laenge);
	}

//Höhe
	for(var o = 1; o <= StricheY; o++) {
	context.moveTo(10,(pixel_height(canvas_width / StricheX * o)));
	context.lineTo(canvas_rand,(pixel_height(canvas_width / StricheX * o)));
	}


	context.moveTo(10,pixel_height(h * scale)); //Anfangshöhe
	context.lineTo(canvas_rand,pixel_height(h * scale));

	
	
	
	context.stroke();

	
}









//Winkel von Grad nach Radiant umrechnen
function Angle(x) {
	return x * Math.PI / 180.0;
}









function wurfparabel() {
	context.beginPath();
	context.moveTo(20, pixel_height(h * scale));
	var currentCoordX, currentCoordY, time;
	for(var i = 0; i <= steps; i++) {
		time = t * i / steps;
		currentCoordX = xv * time;
		
		currentCoordY = -(g / 2) * Math.pow(time, 2)
				+ yv * time
				+ h;
		context.lineTo(currentCoordX * scale + canvas_rand, pixel_height(currentCoordY * scale));
		context.strokeStyle = 'red';
		context.stroke();
		

	}
	//Ausgaben
	document.getElementById('zeit').innerHTML	= round(t, '1000');
	document.getElementById('weg').innerHTML 	= round(xs, '1000');
	document.getElementById('ymax').innerHTML 	= round(ymax, '1000');




	//In Diagramm eintragen
	context.fillText(round(h, '100'),1, pixel_height(h * scale)); //Starthöhe
	

		
	//Breite
	for(var o = 1; o <= StricheX; o++) {
		context.fillText(round(xs / StricheX * o, '100'),pixel_width(canvas_width / StricheX * o),519);
	}

	//Höhe
	for(var o = 1; o <= StricheY; o++) {
	context.fillText(round(ymax * StricheY * o, '100'),0,(pixel_height(canvas_width / StricheX * o)));
	}
	
	context.fillText('0',1, 519); //0-Punkt
 
}


function ball(i){
reset();
rahmen();
wurfparabel();

var ball_d = 15;
	context.beginPath();
	var currentCoordX, currentCoordY, time;

		time = t * i / steps;
		currentCoordX = xv * time;
		
		currentCoordY = -(g / 2) * Math.pow(time, 2)
				+ yv * time
				+ h;
		
		context.arc(currentCoordX * scale + canvas_rand, pixel_height(currentCoordY * scale), ball_d, 0, Math.PI*2, true);
		context.strokeStyle = 'blue';
		context.stroke();
		context.closePath();
		
		context.beginPath();
		context.moveTo((currentCoordX * scale + canvas_rand)+ball_d, pixel_height(currentCoordY * scale));
		context.lineTo((currentCoordX * scale + canvas_rand)-ball_d, pixel_height(currentCoordY * scale));
		context.moveTo(currentCoordX * scale + canvas_rand, (pixel_height(currentCoordY * scale))+ball_d);
		context.lineTo(currentCoordX * scale + canvas_rand, (pixel_height(currentCoordY * scale))-ball_d);
		context.stroke();
		
		
		context.closePath();
		
		
		
		//Hilfslinien
		/*
		context.beginPath();
		context.moveTo(currentCoordX * scale + canvas_rand, pixel_height(0));
		context.lineTo(currentCoordX * scale + canvas_rand, pixel_height(currentCoordY * scale));
		context.lineTo(pixel_width(0), pixel_height(currentCoordY * scale));
		context.strokeStyle = '#7e7e7e';
		context.lineWidth = '1';
		context.stroke();
		context.closePath();*/
		
		
		
		//Ändernde Werte
		document.getElementById('currentx').innerHTML 	= round(currentCoordX, '100');
		document.getElementById('currenty').innerHTML 	= round(currentCoordY, '100');
		document.getElementById('currentt').innerHTML 	= round(time, '100');

	
	
}




function round(zahl, dezimalstellen){ //Rundfunktion
	return Math.round(zahl * dezimalstellen) / dezimalstellen;
	
}

</script>
</body>
</html>

Das nächste Problem ist dann, dass die X Achse Dynamisch ist.

var canvas_height = 500;
var canvas_width = 900;

Diese ändern. Aber die Y Achse nicht. Schaff ich ebenfalls nicht.

Ich hoffe ihr könnt mir helfen.

Beitrag zuletzt geändert: 23.2.2013 14:31:10 von c143

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

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city