通过单击鼠标使画布对象消失

Question

My assignment is to randomly draw 3-6 random sized and random colored rectangles then add another every two seconds and then animate them so they move. 我的任务是随机绘制3-6个随机大小和颜色随机的矩形，然后每两秒钟添加另一个矩形，然后对其进行动画处理以使其移动。 Done this. 做完了 All that is left is to make the rectangles disappear with a mouse click. 剩下的就是通过单击鼠标使矩形消失。

My Html 我的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assignment 5</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/assignment5.css">
</head>
<body>
    <header>
      <h1>Assignment 5</h>
    </header>

<!--the height and width attributes size the canvas-->
<canvas id="canvas" width="1200" height="600"></canvas>


    <script src="js/assignment5.js" charset="utf-8"></script>
    <footer>
        Copyright &copy no one in particular...
    </footer>

My Javascript 我的Javascript

randomBoxes();


function getRandomColor() {         //Generates a random hex number for the color
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += (Math.random() * 16 | 0).toString(16);
    }
    return color;
}

  function boundryNum(theMin, theMax) {
     var theRange = (theMax - theMin) + 1;
     var randomNum = Math.floor((Math.random() * theRange) + theMin);
     return randomNum;
  }

  function drawbox() {
      var width = Math.floor(Math.random() * 200) +20;    //Random witdth 20-200
      var height = Math.floor(Math.random() * 200) + 20;  //Random height 20-200
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.fillRect(boundryNum(25,800),boundryNum(25,400),width,height);  //ctx.fillRect(x, y, width, height), where x and y are the coordinates of the starting place on the canvas.
      context.fillStyle = getRandomColor();
  }

  function randomBoxes(){
    var number = Math.floor(Math.random() * 5) + 1; //Three to six times....
    while(number >= 0){
    drawbox();
    number--;
    }
  setInterval(drawbox, 2000)
  }

My Css 我的CSS

html{
  font-size: 14px;
}

header{
  background-color: black;
  height: 3rem;
  text-align: center;
}

h1{
  color: white;
}

h2{
  color:black;
}



body{
  background-color: black;
  padding-left: 30px;
  padding-right: 30px;
}

#canvas {
  position: absolute;
  top: 4.5rem;              //Starting point top-left.
  left: 1.5rem;
  width: 1000px;
  height: 500px;
  background: black;

  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(800px, 200px);  //(horizotal travel, verticle travel)
  }
}

footer{
  background-color: lime;
  text-align: center;
  color: black;
  margin-top: 800px;
}

I have done two days of research on this and what I have come up with is that I should create an array or each rectangle as they are drawn and using canvas mouse coordinates go through the array making a comparison to the rectangles coordinates and use the clearRectangle attribute of canvas drawings to clear the rectangle. 我已经进行了两天的研究，得出的结论是我应该在绘制数组时创建一个数组或每个矩形，并使用画布鼠标坐标遍历该数组以与矩形坐标进行比较并使用clearRectangle画布图纸的属性以清除矩形。 I am really stuck at this last step of this assignment. 我真的被这项作业的最后一步困住了。 If you know how it is done I am ready to learn how to do it. 如果您知道该怎么做，我准备学习如何做。

As my final project for this class I want to turn this into a game with increasing harder levels by speeding up the creating of rectangles and giving some of them gradients and shadows. 作为本课程的最后一个项目，我想通过加快矩形的创建并为其提供一些渐变和阴影，将其变成难度越来越大的游戏。 Thanks. 谢谢。

Answer 1

My solution would have been to yes, create an array of each object, giving them an ID as well. 我的解决方案是，是的，为每个对象创建一个数组，并为其指定一个ID。 Then to delete then such that when they are clicked remove them from the array. 然后删除，以便在单击它们时将其从阵列中删除。 "rectangle1.onclick". “ rectangle1.onclick”。

You may also want to create a box object each time and do it that way. 您可能还希望每次都创建一个框对象，然后这样做。 Rather than just printing a shape on a canvas. 不仅仅是在画布上打印形状。

通过单击鼠标使画布对象消失

问题描述

1 个解决方案

解决方案1
0 2016-05-08 14:54:00

通过单击鼠标使画布对象消失

问题描述

1 个解决方案

解决方案1 0 2016-05-08 14:54:00

解决方案1
0 2016-05-08 14:54:00