html/javascript画布将设置值更改为用户输入_Javascript_Html_Forms_Canvas

html/javascript画布将设置值更改为用户输入

javascript html forms canvas

html/javascript画布将设置值更改为用户输入,javascript,html,forms,canvas,Javascript,Html,Forms,Canvas,所以我有一些代码可以在画布上弹起一个球，允许用户更改球的大小和颜色。我现在想补充的是，他们的输入也会改变球的速度这是js function draw(){ var canvas = document.getElementById('ball'); context= ball.getContext('2d'); //context.clearRect(150,50,750,750); context.beginPath(); context.fillStyle="#0000ff";

所以我有一些代码可以在画布上弹起一个球，允许用户更改球的大小和颜色。我现在想补充的是，他们的输入也会改变球的速度

这是js

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);

函数绘图（）{
var canvas=document.getElementById（'ball'）；
context=ball.getContext（'2d'）；
//clearRect（150,50750750）；
context.beginPath（）；
context.fillStyle=“#0000ff”；
弧（x，y，10，20，Math.PI*2，true）；
closePath（）；
lineColor=document.getElementById（'lineColor'）。值；
lineWidth=document.getElementById（'lineWidth'）。值；
if（线宽）
{
context.lineWidth=线宽；
}
if（线条颜色）
{
context.strokeStyle=lineColor；
stroke（）；
}
//context.fill（）；
如果（x1000）
dx=-dx；
如果（y1050）
dy=-dy；
x+=dx；
y+=dy；
}
//目前这条线改变了速度
设置间隔（绘制，1）；

以下是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>


弹珠漆
欢迎来到画笔！
开始前：请键入颜色和宽度。现在坐下来欣赏这场表演吧。
球宽：
球的颜色：
球速X：
弹球

就如何使用其他设置而言，您应该根据

speedx

元素的

.value

在

setTimeout

中设置1（这里我还将回退设置为50）


弹珠漆
#球{宽度：500px；高度：500px；背景：#CCC；}
球宽：
球的颜色：
球速X：
弹球
var x=50；
变量y=300；
var dx=10；
var-dy=10；
函数绘图（）{
var ball=document.getElementById（'ball'）；
context=ball.getContext（'2d'）；
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；
弧（x，y，线宽，20，数学π*2，真）；
closePath（）；
if（线宽）{
context.lineWidth=线宽；
}
if（线条颜色）{
context.strokeStyle=lineColor；
stroke（）；
}
context.fill（）；
如果（x500）
dx=-dx；
如果（y500）
dy=-dy；
x+=dx；
y+=dy；
fr=（document.getElementById（'speedx'）。值>0）？document.getElementById（'speedx'）。值：50；
设置超时（绘图，fr）；
}
draw（）；

常见的问题：您尝试了什么？：）哦，对不起，我读错了，将其更改为

setTimeout

，并将其移动到函数中（这样您就可以更改间隔）。你还需要调用

draw（）

一次（也许你现在有

setInterval

来启动它，但它不起作用。尝试过setInterval和set timeout都不起作用。我在那里更改了我的代码，这是一个完整的工作示例（我确实缩小了画布一点，但没什么大不了的）如果我将脚本放在一个单独的Javascript文件中，并在html中调用该文件，那么代码将不起作用。出于某种原因，它不起作用，但如果我将所有内容放在一个html文件中，它就起作用了。当你将它放在文件中时，你是否包含标记？如果是，你不应该这样做。否则，我不确定……它应该起作用

<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>