javascript代码将球反弹到创建的形状上

Question

在HTML5中创建的形状内弹起球的Javascript代码是什么？我尝试了以下代码，但需要对其进行一些更改。它应该使球在形状上反弹。我尝试了以下代码，但需要对其进行一些更改。使用了Javascript和HTML5

我需要对代码进行一些更改，让我知道它们是什么。我尝试了以下代码，但需要对其进行一些更改。它应该使球在形状上反弹。我尝试了以下代码，但需要对其进行一些更改。使用了Javascript和HTML5

var context;
var dx = 4;
var dy = 4;
var y = 150;
var x = 10;
var start_y = 0;
var start_x = 0;
var arc_center_x = 0;
var arc_center_y = 0;
var start_y2 = 0;
var start_x2 = 0;
var arc_center_x2 = 0;
var arc_center_y2 = 0;
var start_y3 = 0;
var start_x3 = 0;
var arc_center_x3 = 0;
var arc_center_y3 = 0;


//To get pixeldata for point x, y
//let p = context.getImageData(x, y, 1, 1).data;


function draw() {
  context = myCanvas.getContext('2d');
  context.clearRect(0, 0, 600, 600);

  ////////////////////////////////////

  context.beginPath();
  context.fillStyle = "#0000ff";
  context.rect(start_x, start_y, 100, 100);
  context.closePath();
  context.fill();

  ////////////////////////////////////
  context.beginPath();
  context.fillStyle = "#0000ff";
  radius = 50;
  context.arc(arc_center_x, arc_center_y, radius, 0, 2 * Math.PI);
  context.closePath();
  context.fill()

  ////////////////////////////////////

  context.beginPath();
  context.fillStyle = "#0000ff";
  context.rect(start_x2, start_y2, 100, 100);
  context.closePath();
  context.fill();

  ////////////////////////////////////
  context.beginPath();
  context.fillStyle = "#0000ff";
  radius = 50;
  context.arc(arc_center_x2, arc_center_y2, radius, 0, 2 * Math.PI);
  context.closePath();
  context.fill();

  ////////////////////////////////////

  ////////////////////////////////////

  context.beginPath();
  context.fillStyle = "#0000ff";
  context.rect(start_x3, start_y3, 100, 100);
  context.closePath();
  context.fill();

  ////////////////////////////////////
  context.beginPath();
  context.fillStyle = "#0000ff";
  radius = 50;
  context.arc(arc_center_x3, arc_center_y3, radius, 0, 2 * Math.PI);
  context.closePath();
  context.fill();

  ///////////////////////////////////

  context.beginPath();
  context.fillStyle = "#FF0000";
  var radius_ball = 20;
  context.arc(x, y, radius_ball, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();

}

function InitShapesLocation() {

  start_y = Math.random() * 100 + 1
  start_x = Math.random() * 500 + 1

  start_y2 = Math.random() * 200 + 1
  start_x2 = Math.random() * 100 + 1


  start_y3 = Math.random() * 300 + 1
  start_x3 = Math.random() * 300 + 1


  arc_center_x = start_x + Math.random() * 200 + 101;
  arc_center_y = start_y + Math.random() * 200 + 101;

  arc_center_x2 = start_x + Math.random() * 100 + 101;
  arc_center_y2 = start_y + Math.random() * 100 + 101;

  arc_center_x3 = start_x + Math.random() * 400 + 101;
  arc_center_y3 = start_y + Math.random() * 400 + 101;



}

InitShapesLocation();
setInterval(draw, 10);

<!-- body {
  background-color: #ededed;
  font: normal 12px/18px Arial, Helvetica, sans-serif;
}

h1 {
  display: block;
  width: 600px;
  margin: 20px auto;
  padding-bottom: 20px;
  font: normal 24px/30px Georgia, "Times New Roman", Times, serif;
  color: #333;
  text-shadow: 1px 2px 3px #ccc;
  border-bottom: 1px solid #cbcbcb;
}

#container {
  width: 600px;
  margin: 0 auto;
}

#myCanvas {
  background: #fff;
  border: 1px solid #cbcbcb;
}

#nav {
  display: block;
  width: 100%;
  text-align: center;
}

#nav li {
  display: block;
  font-weight: bold;
  line-height: 21px;
  text-shadow: 1px 1px 1px #fff;
  width: 100px;
  height: 21px;
  padding: 5px;
  margin: 0 10px;
  background: #e0e0e0;
  border: 1px solid #ccc;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  float: left;
}

#nav li a {
  color: #000;
  display: block;
  text-decoration: none;
  width: 100%;
  height: 100%;
}

-->

<div id="container">
  <canvas id="myCanvas" width="600" height="600"></canvas>
</div>

它应该使球在形状上反弹。我尝试了以下代码，但需要对其进行一些更改。使用了Javascript和HTML5