0 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var canvas_variable;
var init_x = 200;
var init_y = 300;
var x_move = 1;
function initialize_canvas()
{setInterval(draw_ball, 10);
 canvas_variable = bouncing_ball_canvas.getContext('2d');
  }
  function draw_ball()
   {
   canvas_variable.clearRect(0,0, 1000, 500);
   canvas_variable.beginPath();
   canvas_variable.fillStyle="#FF0000";
   canvas_variable.arc(init_x, init_y, 50, 0+init_x/50, Math.PI*2+init_x/50, true);
   canvas_variable.lineTo(init_x, init_y);
   canvas_variable.stroke();
   if( init_x<0 || init_x>1000) x_move = -x_move;
   init_x += x_move;
   }
  </script>
  </head>
  <body>
  <canvas id="bouncing_ball_canvas" width="1000" height="500">
  </canvas>
  <body onLoad="initialize_canvas();">
  </body>
  </html>

这是一个滚动球的程序。每 10 毫秒调用一次函数 draw_ball。球在运动过程中闪烁。这个问题的解决方案是什么？

4

2 回答 2

2

您忘记声明变量 bouncing_ball_canvas

尝试添加：

bouncing_ball_canvas = document.getElementById("bouncing_ball_canvas");

在你声明 canvas_variable 之前。

编辑：

问题在于：

canvas_variable.arc(init_x, init_y, 50, 0+init_x/50, Math.PI*2+init_x/50, true);

将最后一个变量更改为 false，它应该可以工作。

于 2013-05-11T11:29:19.007 回答
0

它闪烁是因为您的计算错误。您需要计算周长：2*pi*r。然后做一个简单的叉积：

distance = x
perimeter = 2*pi

所以角度（以弧度为单位）是distance*2*pi/perimeter

所以试试这个：

const getAngle=function(distance) {
    return distance*2*Math.PI/perimeter;
}
const getPos=function(x, y, angle, r) {
    return [x + Math.cos(angle)*r, y + Math.sin(angle)*r];
}
canvas_variable.arc(init_x, init_y, 50, 0, Math.PI*2, true);
canvas_variable.moveTo(..getPos(init_x, init_y, getAngle(init_x-starting_x), r));
canvas_variable.lineTo(init_x, init_y);
canvas_variable.stroke();
于 2020-08-03T14:13:20.817 回答