1

所以我有一些代码可以在画布周围反弹一个球，允许用户更改球的大小和颜色。我现在要添加的是让他们有一个输入来改变球的速度。

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

这是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>
4

1 回答 1

2

只是你如何处理其他设置，你会setTimeout根据元素的 1 在你的 1 （这里我还设置了一个回退到 50 .value）speedx

<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>
于 2012-08-07T13:00:29.290 回答