html / javascript画布将设置值更改为用户输入 [英] html/javascript canvas change set value to a user input
本文介绍了html / javascript画布将设置值更改为用户输入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
因此，我有一些代码可以在画布上反弹球，从而允许用户更改球的大小和颜色。我现在要添加的内容是让他们也可以更改球的速度。
So I have some code that bounces a ball around a canvas that allows users to change the size and color of the ball. What I want to add now is for them to have an input that changes the speed of the ball as well.
这里是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>
推荐答案
就像其他设置一样，您将根据 speedx <的 .value 在 setTimeout 中设置1 / code>元素（此处我还将后备时间设置为50）
Just how you're doing with the other settings, you'd make the 1 in your setTimeout based on the .value of the speedx element (here I also set a fallback to 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>
这篇关于html / javascript画布将设置值更改为用户输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
