[英]javascript change speed of a ball in a canvas
我的球在畫布上彈起,我試圖改變球的移動速度,但無法正常工作。 我正在嘗試實現速度,就像我在做球的顏色和球的寬度一樣,但是不起作用。 代碼中的setInterval可以改變速度,但無法使它采用speedx輸入的值。
javascript:
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;
speed = document.getElementById('speedx').value;
setInterval(draw,speed);
if (lineWidth)
{
context.lineWidth=lineWidth;
}
if (lineColor)
{
context.strokeStyle=lineColor;
context.stroke();
}
}
HTML:
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>
好像您要設置一千個計時器而不停止任何前一個計時器,因為您使用的是setInterval而不是setTimeout。 基本上,每次調用draw時都會創建一個新的計時器,並且每個計時器每次有間隔時都會調用一次draw。 我認為這會使它始終以最快的速度運行。
另外,從該代碼中還不清楚x和y的設置位置。
同樣,在每次迭代中找到上下文也不是最佳性能。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.