38leinaD/nils-programmieren

## nils-programmieren
<html>
<head>
</head>
<body>
<h1>Hallo</h1>
<p>Wie ist dein Name?</p>
<input type="text"></input>
<canvas id="my-house" width="300" height="300"></canvas>
<button onclick="buttonClicked()">Click</button>
<script>
	console.log("hello")

	const canvas = document.getElementById("my-house");
	const ctx = canvas.getContext("2d");
/*
// Set line width
ctx.lineWidth = 10;

// Wall
ctx.strokeRect(75, 140, 150, 110);

// Door
ctx.fillRect(130, 190, 40, 60);

ctx.strokeStyle = "green"
*/
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
ctx.moveTo(10, 50)
ctx.lineTo(50, 50)
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();


function zeichneEllipse(xMittelpunkt, yMittelpunkt, breite, hoehe) {
	ctx.beginPath();
	ctx.ellipse(xMittelpunkt, yMittelpunkt, breite, hoehe,0, 0, 2 * Math.PI);
	ctx.stroke();
}

function zeichneLinie(xStart, yStart, xEnde, yEnde) {
	ctx.beginPath();
	ctx.moveTo(xStart, yStart)
	ctx.lineTo(xEnde, yEnde)
	ctx.closePath();
	ctx.stroke();
}

function zeichneKreis(xMittelpunkt, yMittelpunkt, radius) {
	ctx.beginPath();
	ctx.arc(xMittelpunkt, yMittelpunkt, radius, 0, 2 * Math.PI);
	ctx.stroke();
}

zeichneEllipse(100, 100, 50, 85);
zeichneLinie(10, 10, 500, 100);
zeichneKreis(100, 100, 100);
function buttonClicked() {
	console.log("TEST")
}


var stepVal = 0.01;

function step(timestamp) {
	stepVal += 0.1;

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, canvas.height);
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(canvas.width, 0);

ctx.closePath();
ctx.stroke();

ctx.fillRect(130 + stepVal, 190, 40 + stepVal, 60);

	window.requestAnimationFrame(step);

}

//window.requestAnimationFrame(step);

</script>
</body>
</html>
	<html>
	<head>
	</head>
	<body>
	<h1>Hallo</h1>
	<p>Wie ist dein Name?</p>
	<input type="text"></input>
	<canvas id="my-house" width="300" height="300"></canvas>
	<button onclick="buttonClicked()">Click</button>
	<script>
	console.log("hello")

	const canvas = document.getElementById("my-house");
	const ctx = canvas.getContext("2d");
	/*
	// Set line width
	ctx.lineWidth = 10;

	// Wall
	ctx.strokeRect(75, 140, 150, 110);

	// Door
	ctx.fillRect(130, 190, 40, 60);

	ctx.strokeStyle = "green"
	*/
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	ctx.beginPath();
	ctx.moveTo(10, 50)
	ctx.lineTo(50, 50)
	ctx.closePath();
	ctx.stroke();

	ctx.beginPath();
	ctx.arc(100, 75, 50, 0, 2 * Math.PI);
	ctx.stroke();



	function zeichneEllipse(xMittelpunkt, yMittelpunkt, breite, hoehe) {
	ctx.beginPath();
	ctx.ellipse(xMittelpunkt, yMittelpunkt, breite, hoehe,0, 0, 2 * Math.PI);
	ctx.stroke();
	}

	function zeichneLinie(xStart, yStart, xEnde, yEnde) {
	ctx.beginPath();
	ctx.moveTo(xStart, yStart)
	ctx.lineTo(xEnde, yEnde)
	ctx.closePath();
	ctx.stroke();
	}

	function zeichneKreis(xMittelpunkt, yMittelpunkt, radius) {
	ctx.beginPath();
	ctx.arc(xMittelpunkt, yMittelpunkt, radius, 0, 2 * Math.PI);
	ctx.stroke();
	}

	zeichneEllipse(100, 100, 50, 85);
	zeichneLinie(10, 10, 500, 100);
	zeichneKreis(100, 100, 100);
	function buttonClicked() {
	console.log("TEST")
	}


	var stepVal = 0.01;

	function step(timestamp) {
	stepVal += 0.1;

	ctx.clearRect(0, 0, canvas.width, canvas.height);

	ctx.beginPath();
	ctx.moveTo(0, 0);
	ctx.lineTo(0, canvas.height);
	ctx.lineTo(canvas.width, canvas.height);
	ctx.lineTo(canvas.width, 0);

	ctx.closePath();
	ctx.stroke();

	ctx.fillRect(130 + stepVal, 190, 40 + stepVal, 60);

	window.requestAnimationFrame(step);

	}

	//window.requestAnimationFrame(step);

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