Lassen Sie ein Canvas-Objekt mit einem Mausklick auf das Objekt verschwinden

Meine Aufgabe ist es, 3-6 zufällige und zufällige farbige Rechtecke nach dem Zufallsprinzip zu zeichnen, dann alle zwei Sekunden ein weiteres hinzuzufügen und sie dann so zu animieren, dass sie sich bewegen. Hab es getan. Es bleibt nur übrig, die Rechtecke mit einem Mausklick verschwinden zu lassen.Lassen Sie ein Canvas-Objekt mit einem Mausklick auf das Objekt verschwinden

Meine 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>

Mein 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) 
    }

Mein 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; 
}

ich zwei Tage der Forschung über das getan haben und was ich Ich habe mir gedacht, dass ich ein Array oder jedes Rechteck erstellen soll, während sie gezeichnet werden und die Mauskoordinaten verwenden, um die Rechtecke zu vergleichen und das clearRectangle-Attribut von Canvas-Zeichnungen zum Löschen des Rechtecks zu verwenden. Ich bin wirklich bei diesem letzten Schritt dieser Aufgabe festgefahren. Wenn Sie wissen, wie es gemacht wird, bin ich bereit zu lernen, wie es geht.

Als mein letztes Projekt für diese Klasse möchte ich dies in ein Spiel mit immer härteren Leveln verwandeln, indem ich die Erstellung von Rechtecken beschleunige und einigen von ihnen Gradienten und Schatten gebe. Vielen Dank.

Quelle

2016-05-08 Derral

Entschuldigung, in meinem ursprünglichen Kommentar habe ich verpasst, dass Sie die Animation in CSS machen. Sie können einen Klick-Handler an die Box anhängen, um ihn zu entfernen, aber ich denke, Sie möchten möglicherweise zu einer Animation mit JS wechseln und ein Array zur Verwaltung Ihrer Boxen verwenden. Ich denke, das gibt Ihnen viel bessere Kontrolle über die Bewegungsarten. – JonSG

Ihr Design ist ein bisschen ungewöhnlich. ** Starthinweise: ** Das übliche Design besteht darin, alle Ihre Retrakte in ein Array zu legen und dann alle Ihre Retrakte auf die Leinwand zu zeichnen. Canvas-Rectures können nicht verschoben werden, aber Sie können den Canvas löschen und alle Recs an ihren neuen Positionen neu zeichnen (wodurch der Bewegungseffekt entsteht). Hören Sie zu, dass Benutzer auf Ereignisse klicken, indem Sie das Ereignis "mousedown" von canvas abonnieren. Hit-Test, wenn die Maus über irgendein Rect mit 'mousex> rectx && mousex recty && mousey markE

Meine Lösung wäre ja gewesen, ein Array von jedem Objekt zu erstellen und ihnen eine ID zu geben. Dann zu löschen dann so, dass, wenn sie angeklickt werden, entfernen Sie sie aus dem Array. "rectangle1.onclick".

Sie können auch jedes Mal ein Box-Objekt erstellen und es so machen. Anstatt nur eine Form auf einer Leinwand zu drucken.

Quelle

2016-05-08 14:54:00 MichaelMariani

Lassen Sie ein Canvas-Objekt mit einem Mausklick auf das Objekt verschwinden

Antwort

Verwandte Themen