In HTML5 Canvas Form ändern auf Schaltfläche klicken?

Question

Ich möchte nur wissen, dass es irgendeine Website gibt, die kurze Informationen über Canvas gibt. Ich arbeite an meinem Projekt. in dem eine Leinwand und 4 Knöpfe. Das sind vier Tasten: CIRCLE, RECTANGLE, SQUARE und ANIMATED RAINBOW.

Wenn ich auf Kreisknopf in der Leinwand anklicke, wird lebender Kreis gezeigt, wenn ich auf Rechteckknopf anklicke, dass Zeitkreis sich in easy in/out Art in der Animation in das Rechteck ändert. Formen ändern sich in andere Formen, aber in animierten Stil auf Leinwand.

Ich lese viele Artikel viele Videos zu sehen, aber ich kann keine Lösung finden. Unten zeige ich ein Bild.

Wenn jemand mir sagen, und einen Vorschlag machen mir, wo ich für das Studium gehen. Danke.

Answer 1

Machen Sie 4 verschiedene Funktionen in JavaScript Kreis, Rechteck, Quadrat, Regenbogen. Und machen Sie 4 verschiedene Klassen in diesem Fall. Dann setzen Sie den Wert der Convas-Klasse nach Form in JavaScript-Funktionen. Wie wenn Sie auf den Kreis klicken. Zuerst den HTML-Code einstellen.

Wenn der Benutzer auf diese Schaltfläche klickt, ruft er die Funktion circle function auf, die den Code in der Funktion circle in JavaScript schreibt.

function circle(){ 
    canvas = document.getElementById("canvas"); 
    canvas.class = "circle"; 
    //This is class name which you have to make in case 
}