通過單擊鼠標使畫布對象消失

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