Html / javascript Leinwand ändern Wert auf eine Benutzereingabe

So habe ich einen Code, der einen Ball um eine Leinwand springt, die es Benutzern erlaubt, die Größe und die Farbe des Balles zu ändern. Was ich jetzt hinzufügen möchte, ist für sie, eine Eingabe zu haben, die auch die Geschwindigkeit des Balles ändert.

Hier ist die js

  • Änderungsspanne, wenn sich das Textfeld ändert
  • Senden Sie zwei Formulare mit einer Taste
  • Ersetzen Sie + mit% 20 in URL generiert
  • Wenn die Validierung erfolgreich ausblenden, klicken Sie auf die Schaltfläche
  • Gemeinsames Ereignis für alle Elemente auf Formular
  • Wie berechnen wir zwei Eingabeformularfelder und setzen den Wert in einen anderen, ohne das Formular mit jquery einzureichen?
  • function draw(){ var canvas = document.getElementById('ball'); context= ball.getContext('2d'); //context.clearRect(150,50,750,750); context.beginPath(); context.fillStyle="#0000ff"; context.arc(x,y,10,20,Math.PI*2,true); context.closePath(); lineColor = document.getElementById('lineColor').value; lineWidth = document.getElementById('lineWidth').value; if (lineWidth) { context.lineWidth=lineWidth; } if (lineColor) { context.strokeStyle=lineColor; context.stroke(); } //context.fill(); if( x<0 || x>1000) dx=-dx; if( y<0 || y>1050) dy=-dy; x+=dx; y+=dy; } //currently this line changes the speed setInterval(draw,1); 

    Hier ist die html:

      <html> <body style="background-color:#FFDEAD;"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bouncing Ball Paint</title> <body> Welcome to Paint Brush! Before you begin: Please type in a color and width. Now sit back and enjoy the show.</body> <body> Ball Width: <input type="text" id="lineWidth"></input> Ball Color: <input type="text" id="lineColor"></input> Ball Speed X:<input type="text" id="speedx"></input> <input type="button" value="Clear" onClick="window.location.href=window.location.href"> </body> <body> <h1>Bouncing a Ball</h1> <div id="container"> <canvas id="ball" width="2050" height="2050"></canvas> </div> <script type="text/javascript" src="balledit1.js"> </script> </body> </html> 

  • JavaScript: Form onSubmit funktioniert nicht, wenn die Funktion 'submit'
  • JQuery - wähle das zugehörige Label-Element eines Eingabefeldes aus [duplizieren]
  • Javascript Array ID's
  • Javascript: Ausblenden eines Formulareingangs abhängig vom Wert eines bestimmten Dropdowns
  • Versuche, den Gesamtbetrag basierend auf Benutzereingaben zu erhalten
  • JQuery Änderungsereignis auf einem <input> -Element - irgendeine Möglichkeit, vorherigen Wert zu behalten?
  • One Solution collect form web for “Html / javascript Leinwand ändern Wert auf eine Benutzereingabe”

    Wie du mit den anderen Einstellungen machst, machst du die 1 in deinem setTimeout basierend auf dem .value des speedx Elements (hier habe ich auch einen Fallback auf 50 gesetzt)

     <html> <header> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bouncing Ball Paint</title> <style> #ball{width:500px;height:500px; background:#CCC;} </style> </header> <body style="background-color:#FFDEAD;"> Ball Width: <input type="text" id="lineWidth"></input> Ball Color: <input type="text" id="lineColor"></input> Ball Speed X:<input type="text" id="speedx"></input> <input type="button" value="Clear" onClick="window.location.href=window.location.href"> <h1>Bouncing a Ball</h1> <canvas id="ball" width="500" height="500"></canvas> <script> var x=50; var y=300; var dx=10; var dy=10; function draw(){ var ball = document.getElementById('ball'); context= ball.getContext('2d'); context.clearRect(0,0,ball.width,ball.height); lineColor = (document.getElementById('lineColor').value.length>0)?document.getElementById('lineColor').value:'#0000FF'; lineWidth = (document.getElementById('lineWidth').value.length>0)?document.getElementById('lineWidth').value:'10'; context.beginPath(); context.fillStyle=lineColor; context.arc(x,y,lineWidth,20,Math.PI*2,true); context.closePath(); if (lineWidth){ context.lineWidth=lineWidth; } if (lineColor){ context.strokeStyle=lineColor; context.stroke(); } context.fill(); if( x<0 || x>500) dx=-dx; if( y<0 || y>500) dy=-dy; x+=dx; y+=dy; fr = (document.getElementById('speedx').value>0)?document.getElementById('speedx').value:50; setTimeout(draw,fr); } draw(); </script> </body> </html> 
    Lassen Sie uns Javascript Schönheit und nützlich machen.