Question

<!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函数。球在运动过程中闪烁。这个问题的解决方案是什么？

Answer 1

您忘了声明变量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，它应该可以正常工作。

Answer 2

它闪烁，因为您的计算错误。您需要计算周长：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();

一个显示滚球的简单程序

2 个答案: