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

因此，我有一些代码可以让用户更改球的大小和颜色，从而在球体周围弹起球。我现在想补充的是他们有一个输入，也可以改变球的速度。html/javascript canvas将设置值更改为用户输入

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

来源

2012-08-07 LewSim

通常的q问题：你有什么尝试？ :) – 2012-08-07 12:33:26

你只是如何与其他设置做，你会基础上，使1在你setTimeout.value的speedx元素（这里我也设置了回退到50）

<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-07 13:00:29

似乎没有工作... – LewSim 2012-08-07 16:28:37

哦，对不起，我误解了，将其更改为'setTimeout'并将其移动到您的函数内（这样您就可以更改间隔）。你仍然需要调用'draw（）'一次（也许你现在有'setInterval'来启动它 – 2012-08-07 17:37:12

nah它不起作用。setinterval和set timeout都不起作用 – LewSim 2012-08-07 18:28:00

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

回答

相关问题