JS - Wie kann ich die Höhe eines Rechtecks mit einem Schieberegler / Slider (range) im Canvas vergrößern und verkleinern?
Hallo,
meine Code sieht gerade so aus. Es funktioniert aber nicht. Was müsste ich hier ändern?
<hmtl>
<head>
<title>hi guys</title>
</head>
<body>
Schieberegler:
<br>
<canvas id="canvas" height='400' width='600'></canvas>
</body>
<br>
<input id='slider' type='range' max="100" min="0">
<p id='outpRadius'> 50 </p>
<input type='color'>
<hr>
<script>
'use strict';
window.onload = function() {
var slider = document.getElementById('slider')
var output = document.getElementById('outpRadius');
slider.addEventListener('input', aendereRadius, false)
function aendereRadius() {
output.innerHTML = slider.value;
console.log(output.innerHTML);
}
var canvas = document.getElementById('canvas');
canvas.style.backgroundColor = 'yellow';
var ctx = canvas.getContext('2d');
ctx.fillRect(50,50,50,output.innerHTML);
}
</script>
</html>
2 Antworten
1) Der Doctype (in der ersten Zeile, vor dem öffnenden html-Tag) fehlt.
<!doctype html>
2) Alle Seitenelemente gehören ausnahmlos in den body-Bereich. Das wären in deinem Fall die Elemente br, input, p, hr. Das script-Element wiederum darf nur im head- oder body-Bereich stehen.
Verschiebe den schließenden body-Tag also hinter dein schließendes script-Tag.
3) Beim Namen des öffnenden html-Tag hast du die Zeichen verdreht.
4) Auf deiner Zeichenfläche wird nur ein einziges Mal gezeichnet und daher verändert sich da nachträglich auch nichts mehr.
Deine Funktion aendereRadius müsste folgendermaßen angepasst werden:
function aendereRadius() {
output.innerText = slider.value;
console.log(output.innerText);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(50, 50, 50, slider.value);
}
Das Prinzip ist ständiges Übermalen. Mit clearRect wird die Zeichenfläche zuvor geleert, damit vorherige Zeichenvorgänge nicht stören und es somit so scheint, als würde sich ein- und dasselbe Rechteck bei Bewegung des Sliders nur in seiner Größe anpassen.
Du siehst hier auch, dass ich innerHTML gegen innerText ausgetauscht habe. So lange du nicht wirklich HTML in ein Element einfügst, ist der Einsatz dieses Properties nämlich nur Overhead. Als Argument für fillRect hat so ein Ausdruck sogar direktes Fehlerpotenzial, denn stände dann einmal wirklich HTML in diesem Element, würde JavaScript bei seiner impliziten Konversion des Strings zu einer Zahl nicht mehr das produzieren, was du dir vorstellst.
Bei der Deklaration von slider und in der Zeile
slider.addEventListener('input', aendereRadius, false)
fehlt jeweils das Semikolon am Ende der Zeile. Javascript nimmt es da sehr genau...
Versuche mal, für die id der Canvas einen anderen Namen (z.B. canv oder so) zu nehmen. Bin mir nicht sicher, aber daran könnte es auch liegen.
Hast du es mal mit Semikolon versucht? Ein „überflüssiges” optionales Semikolon kann ja nicht schaden.
Ich bin nicht der Fragesteller, aber daran liegt es wie gesagt nicht ;)
JavaScript braucht keine Semikolons... Die am Ende sind optional
So viel zu "JS nimmt es da sehr genau"