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

Question

我的任务是随机绘制3-6个随机大小和颜色随机的矩形，然后每两秒钟添加另一个矩形，然后对其进行动画处理以使其移动。 做完了 剩下的就是通过单击鼠标使矩形消失。

我的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>

我的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)
  }

我的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;
}

我已经进行了两天的研究，得出的结论是我应该在绘制数组时创建一个数组或每个矩形，并使用画布鼠标坐标遍历该数组以与矩形坐标进行比较并使用clearRectangle画布图纸的属性以清除矩形。 我真的被这项作业的最后一步困住了。 如果您知道该怎么做，我准备学习如何做。

作为本课程的最后一个项目，我想通过加快矩形的创建并为其提供一些渐变和阴影，将其变成难度越来越大的游戏。 谢谢。

Answer 1

我的解决方案是，是的，为每个对象创建一个数组，并为其指定一个ID。 然后删除，以便在单击它们时将其从阵列中删除。 “ rectangle1.onclick”。

您可能还希望每次都创建一个框对象，然后这样做。 不仅仅是在画布上打印形状。

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

问题描述

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