Canvas 删除随机画布对象

今天我们做了一个家庭作业，我们需要在画布上用开始和停止按钮创建任意颜色和位置的矩形。 我成功了

我们还需要通过单击删除选定的矩形。 这就是我被困的地方

*注意：这必须使用纯Javascript，而不使用jQuery。

这是我的代码：

HTML:

Canvas Homwrok-Guy Zamir-2018年6月1日
התחל
הפסק

---

Javascript:

   var twoDimention;
MyCanvas;

var randomNumX;
var randomNumY;
var randomNum;

var Interval;
function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function game(){
var boxes = [];

MyCanvas = document.getElementById("MyCanvas");
twoDimention = MyCanvas.getContext("2d");
        Interval = setInterval(function () {
         boxes.push(randomNum);

    for(i=0; i<boxes.length; i++){
//        twoDimention.clearRect(randomNumX, randomNumY, randomNum, randomNum)

        randomNumX = Math.ceil((Math.random() * 800)+1);
        randomNumY = Math.ceil((Math.random() * 800)+1);
        randomNum = Math.ceil((Math.random() * 150)+10);

        twoDimention.fillStyle = getRandomColor();
        twoDimention.fillRect(randomNumX, randomNumY, randomNum, randomNum);

    }

             }, 1000);   

}


function clearMe(){
  clearInterval(Interval)
}

var二维；
我的画布；
var-randomNumX；
随机变量；
随机变量；
var区间；
函数getRandomColor（）{
变量字母='0123456789ABCDEF'；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}
函数游戏（）{
变量框=[]；
MyCanvas=document.getElementById（“MyCanvas”）；
TwoDimension=MyCanvas.getContext（“2d”）；
间隔=设置间隔（函数（）{
box.push（随机数）；
对于（i=0；我说你被卡住了不是一个好的问题描述。你怎么被卡住了？你遇到了什么具体问题？嗨，John。我被困在需要删除框的部分。我不知道怎么做…你不能直接删除，但你可以清除并重新绘制。实际的删除将从你的数据结构中进行。谢谢，但是如何选择和“删除”每次选择的项目？如何在画布对象上设置“此”操作？
   var twoDimention;
MyCanvas;

var randomNumX;
var randomNumY;
var randomNum;

var Interval;
function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function game(){
var boxes = [];

MyCanvas = document.getElementById("MyCanvas");
twoDimention = MyCanvas.getContext("2d");
        Interval = setInterval(function () {
         boxes.push(randomNum);

    for(i=0; i<boxes.length; i++){
//        twoDimention.clearRect(randomNumX, randomNumY, randomNum, randomNum)

        randomNumX = Math.ceil((Math.random() * 800)+1);
        randomNumY = Math.ceil((Math.random() * 800)+1);
        randomNum = Math.ceil((Math.random() * 150)+10);

        twoDimention.fillStyle = getRandomColor();
        twoDimention.fillRect(randomNumX, randomNumY, randomNum, randomNum);

    }

             }, 1000);   

}


function clearMe(){
  clearInterval(Interval)
}