JS - Canvas: Kann mir bitte jemand genau erklären, was in der for Schleife passiert?

Hallo,

kann mir bitte jemand genau erklären, was in der for-Schleife in der Funktion "drawNumbers" passiert?

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90

drawNumbers(ctx,radius);

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(),0,0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }

1 Antwort

Lezurex

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, programmieren, JavaScript

11.09.2021, 20:04

Die Schleife geht die Zahlen 1 - 12 durch, sie wird also 12-mal ausgeführt und jedes mal ist die Variable num eins grösser.

Danach wird aus dieser Variable ein Winkel errechnet, in der die Zahl auf den Canvas geschrieben werden soll, darum ist da auch Pi involviert.

Der Context wird dann richtig rotiert und positioniert und die Zahl wird hingeschrieben.

Woher ich das weiß:Berufserfahrung – Informatiker Applikationsentwicklung

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>

...zur Frage

JavaScript: Wie kann ich ein Bild in mein Canvas einfügen?

Servus!

Ich möchte gerne ein Bild in mein Canvas einfügen. Es klappt aber nicht und die Konsole zeigt auch keine Fehlermeldungen an.

Ich habe folgenden Code:

var canvas = document.getElementById("gameScreen");
var context = canvas.getContext("2d");
var imgBall = document.getElementById('img_ball');

function make_ball() {
  imgBall = new Image();
  imgBall.onload = function() {
    context.drawImage(imgBall, 10, 10);
  }
}

make_ball();

In der HTML-Datei habe ich noch src und die id (img_ball) in das img-Tag geschrieben.

Vielleicht findet ja von euch jemand den Fehler.

Dankeschön.

...zur Frage

HTML Canvas: Wo ist mein Fehler?

HTML:

<canvas id="screen" style="width:200px; height:200px;"></canvas>

JS:

const canvas = document.getElementById("screen");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(0, 0, 80, 80);

Das sollte ein grünes Quadrat malen. Jedoch bekomme ich ein grünes Rechteck, das doppelt so hoch ist wie breit.

Warum?

Was mache ich falsch / Was habe ich übersehen?

Hier ein JSFiddle: https://jsfiddle.net/7cenmwh5/2/

...zur Frage

JavaScript Variable mit Schieberegler anpassen?

Hallo,

ich programmiere zur Zeit mit Canvas ein kleines Spiel für die Schule. Allerdings gibt es da ein kleines Problem.

Ich möchte gerne die Geschwindigkeit des Spieler individuell mit Hilfe eines range input-Elements verändern. Allerdings bekomme ich es nicht hin, den Output erfolgreich der Variable zuzuordnen.

Hier der Code:

<body>
  <canvas id="canvas" width="600" height="400" tabindex="1"></canvas>
  <div class="slidecontainer">
    <input type="range" min="1" max="10" value="5" class="slider" id="gs" onchange="input(this.value);">
  </div>
  <script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var score = 0;

    // Spieler Werte
    var x = 50;
    var y = 100;
    var speed = 6;
    var sideLength = 50;
  </script>
</body>

...zur Frage

divs kreisförmig anordnen?

Hi,

ich würde gerne einige divs kreisförmig anordnen und habe auch eine pfiffige Rechnung gefunden. Doch mir fehlt als Anfänger noch irgendwie das Abstraktionsvermögen, um die Formel auch tatsächlich für den Code anwenden zu können. Die Idee: // N Gesamtanzahl der Elemente, n Laufindex, R Radius x[n] =R * cos(n/N * 2 * Math.Pi()) + M.x; y[n] =R * sin(n/N * 2 * Math.Pi()) + M.y;

Setze ich an "x" und "y" einfach die tags / Klassen / IDs und wie binde ich die Formel vernünftig in eine js Function ein? var a = function b () { Formel }

...zur Frage

Wie kann man in Javascript "for"-Schleifen verlangsamen?

Ich arbeite jetzt ein Jahr an Webseiten (Anfänger) und kenne mich schon mit den Basics von HTML, CSS, php und mySQL aus. Javascript brauche ich jetzt, ich will nämlich den Hintergrund einer Website im nachhinein verändern. Heißt: Nach einem "Intro" soll sich reibungslos die Hintergrundfarbe verändern. Nach ein paar Codeschnipseln bin ich nun so weit: var a = 64; b = 64; c = 64; function bgColor() { a++; b++; c++; document.body.style.backgroundColor= 'rgb(' + a + ',' + b + ',' + c + ')'; }

for (var i = 1; i < 200; i++) { setTimeout(function test(){ bgColor(); }, 1000) document.write(a); } Warum funktioniert das nicht? Die Farbe ändert sich sofort... document.write(a); ist mein debug, und es wird dauerhaft 64 ausgegeben. Ich habe schon mehrere Wege versucht, jetzt bin ich verzweifelt .. kann man die for-Schleife irgendwie anders verlangsamen?

...zur Frage

For To Do Schleife?

Wir müssen mit einer For To Do Schleife Potenzen berechnen, aber ich verstehe nicht wo der Fehler bei mir liegt, bzw. was ich anders machen muss, damit es funktioniert..

So sieht mein Programm bis jetzt aus:

program informatik;
var exponent,basis,potenz,schleife,ergebnis:integer;
begin
 writeln('Gib bitte deine Basis ein:');
 readln(basis);
 writeln('Gib bitte deinen Exponenten ein:');
 readln(exponent);
 schleife:=exponent;
 for potenz:=1 to exponent do
 begin
   ergebnis:=basis*basis;
   writeln(ergebnis);
 end;
end.

...zur Frage

Java Scanner Eingabe prüfen?

Scanner scanner = new Scanner(System.in);


for (String s : all.keySet()) { System.out.println(s.trim() + "?"); System.out.println("1 bis 10?");
int num = scanner.nextInt();

while (num &gt; 10 || num &lt; 0) {
    System.out.println();
    System.out.println(s.trim() + "?");
    System.out.println("Bitte gib eine Zahl zwischen 1 und 10 ein.");
    num = scanner.nextInt();
}

all.put(s, num);
System.out.println();

Ich gehe mit einer for-Schleife durch eine Liste mit Wörtern und möchte sicherstellen, dass die Eingabe zwischen 1 und 10 ist, und wenn KEINE Zahl eingetippt wird, dass darauf hingewiesen wird, dass man eine Zahl eintippen soll.

Bis jetzt funktioniert nur, dass er zwischen 1 und 10 Zahlen nimmt. Passt. Aber er schaut nicht ob es ein String is.

Wie?

...zur Frage

Batch doppel var in for Schleife?

Guten Abend

Komme mit meinem Batch Scribt nicht voran.
Das Problem was ich habe ist einerseits eine doppel Variable und ein set Befehl was die Geschichte in einer for Schleife auch nicht einfacher macht.

Was macht das Scribt?
Das Zeil wäre das es alle Wlannamen raussucht die es jemals verbunden war und sie dann weiterverarbeitet.

SET one=1
set namenumber=7
set immer=1
set name=name
SETLOCAL ENABLEDELAYEDEXPANSION
for /F "tokens=* USEBACKQ" %%F in (`netsh wlan show profiles`) do (
 set name!one!=%%F
 set /a one=!one!+1
)
:namenumber
if [!%name%%namenumber%!]==[] (
	set /A namenumber=%namenumber%-1
) else (
	set /a namenumber=%namenumber%+%immer%
	goto namenumber
)
for /L %%A in (7,1,%namenumber%) do (
	set namenumber=%%A
	set test=!name%namenumber%!
	set wlan!%namenumber%!=%test:~27%
)

...zur Frage

Warum ist bei dieser Blender Curve diese Komische linie?

Hallo ich möchte mit einem Script eine Viertelkreiskurve mit dem Radius 2 erstellen und der Kreisbogen soll von der world origin losgehen hier ist der skript:

import bpy
import math

# Radius des Viertelkreises
radius = 2

# Anzahl der Segmente für den Umfang
segments = 30

# Erstelle eine neue Kurve
curve_data = bpy.data.curves.new('Viertelkreis', 'CURVE')
curve_data.dimensions = '2D'

# Erstelle einen neuen Spline
spline = curve_data.splines.new('POLY')

# Setze die Punkte des Splines
spline.points.add(segments + 1) # Addiere 1, um den Startpunkt zu berücksichtigen

for i in range(segments + 1): # Addiere 1, um den Startpunkt zu berücksichtigen
  angle = (math.pi / 2) / segments * i
  x = radius * math.cos(angle)
  y = radius * math.sin(angle)
  z = 0
  spline.points[i].co = (x, y, z, 1)

# Verschiebe den Viertelkreis, um vom Ursprung aus zu starten
curve_obj = bpy.data.objects.new('Viertelkreis', curve_data)
curve_obj.location = (0, -2, 0) # Verschiebe um den Radius entlang der y-Achse

# Erstelle ein neues Objekt und füge die Kurve hinzu
bpy.context.collection.objects.link(curve_obj)

Und meiner Meinung nach ist das alles Okay, aber aus irgendeinem Grund gibt es eine linie nach unten:

Kann mir jemand helfen, wie ich diese gerade linie links weg bringe

...zur Frage

Dreieck ausgeben mit for schleife in Javascript?

Hallo,

ich wollte Fragen wie ich ein Dreieck ausgeben kann mit Javascript, dabei soll das Dreieck vorher mit einer Zahl mit "prompt" eingegeben und mit sternchen ausgegeben werden.

Am Ende sollte es so aussehen wenn man z.B. die Zahl 4 eingegeben hat:

***

****

Zurzeit habe ich schon einen Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript">
        function sterne(){
            var zahl = prompt("Zahl eingeben");
            for(var i =0; i <zahl; i++){
                ausgabe.innerHTML += "*" + "<br>";
            }
            
            document.querySelector('output').innerText = 
            "Anzahl der Zeilen: " + zahl;
        }
            </script>
        </head>
        <body onload="sterne()">
            <output></output>
            <br>
            <div id="ausgabe"></div>
        </body>
    </html>

Der mir das hier ausgibt:

Anzahl der Zeilen: <Zahl>

Ich vermute man braucht eine weitere For schleife oder ein if, könnte mir da jemand weiterhelfen? Danke für mögliche Antworten.

...zur Frage

Wie kann ich das Ergebnis einer for-schleife in einer Variable speichern? (Javascript)

Hallo! Frage dürfte eigentlich klar sein. Ich will das Ergebnis meiner for-schleife in einer variable speichern. Also meine schleife gibt einen string x mal aus (AAA z.B.). Diesen String möchte ich dann in var speichern.. Meine idee lautete so:

for(var i = 0; i < 3; i++) {
    var s = (p)Hallo(/p);
  }

aber so funktioniert es nicht... in der variable sollte dann stehen:

Hallo

Hoffentlich kann mir jemand weiter helfen

...zur Frage

for-Schleife mit let?

for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 10);
}

Warum hat hier jeder Schleifen-Durchgang seine eigene Kopie von i?

Im Gegensatz zu

for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 10);
}

wo immer dasselbe i benutzt wird?

Ich verstehe ja, dass let block-scoped ist, aber das „let i = 0;“ wird doch nur ein einziges mal ausgeführt, und zwar am Start, BEVOR die Schleifen-Durchgänge ausgeführt werden. Warum benutzen die ganzen Schleifendurchgänge dann nicht dieses eine i, wie es auch beim var der Fall ist? Wie kommt es, dass jede Iteration ihr eigenes i hat? Es wird doch lediglich die Überprüfung der Bedingung am Ende jedes Schleifendurchgangs durchgeführt, nicht die Deklaration?

Wenn ich die for-Schleife zu einer äquivalenten while-Schleife umschreibe teilen sich die Iterationen wie erwartet das selbe i, trotz des lets.

let i = 0;
while (i < 5) {
  setTimeout(() => console.log(i), 10);
  i++;
}

...zur Frage

was ist hier falsch gelaufen?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rocket vs Aliens</title>
  <style>
    canvas {
      background-color: gray;
    }
    
  </style>
  <script>
    let KEY_SPACE = false;
    let KEY_UP = false;
    let KEY_DOWN = false;
    let canvas;
    let ctx;
    let backgroundImage = new Image();
    let rocket = {
      x: 100,
      y: 200,
      width: 200,
      height: 80,
      src: 'img/rocket.png'
    };
    let spaceship = {
      x: 500,
      y: 200,
      width: 100,
      height: 40,
      src: 'img/spaceship.png'
    };
    document.onkeydown = function(e) {
      if (e.keyCode ==32) { // Leertaste gedrückt
        KEY_SPACE = true;
      }
      if (e.keyCode ==32) { // unten gedrückt
        KEY_SPACE = true;
      }
    
      if (e.keyCode ==38) { // Oben gedrückt
        KEY_UP = true;
      }
    }
    document.onkeyup = function(e) {
      if (e.keyCode ==32) { // Leertaste losgelassen
        KEY_SPACE = false;
      }
    
      if (e.keyCode ==38) { // oben losgelassen
        KEY_UP = false;
      }
      if (e.keyCode ==40) { // unten losgelassen
        KEY_DOWN = false;
      }
    }
    function startGame () {
      canvas = document.getElementById('canvas');
       ctx = canvas.getContext('2d');
      loadImages();
      draw();
      // calculate
    }
    function loadImages() {
      backgroundImage.src = 'img/background.png';
      rocket.img = new Image();
      rocket.img.src = rocket.src;
      spaceship.img = new Image();
      spaceship.img.src = spaceship.src;
    }
    function draw() {
      ctx.drawImage(backgroundImage, 0, 0);
      ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.widht, rocket.height);
      
      requestAnimationFrame(draw);
    }
  </script>
</head>
<body onload="startGame()">
<canvas id="canvas" width="720" height="480"></canvas>
</body>
</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen