ボタンクリックでHTML5キャンバスの形が変化しますか？

Question

私はキャンバスに関する簡単な情報を提供するウェブサイトがあることを知りたいだけです。 私は自分のプロジェクトに取り組んでいます。 1つのキャンバスと4つのボタンがあります。 これらは、CIRCLE、RECTANGLE、SQUARE、ANIMATED RAINBOWの4つのボタンです。

矩形ボタンをクリックするとキャンバスアニメーションサークル内の円ボタンをクリックするとアニメーション内のイージーイン/アウトスタイルの矩形に変化します。シェイプは別のシェイプに変更されますが、アニメーションスタイルはキャンバス上にあります。

多くの記事を読んでいますが、解決策が見つかりません。 以下に画像を示します。

いずれか教えてください、私に私が研究のために行くいくつかの提案を与える場合。 ありがとうございます。

Answer 1

JavaScriptサークル、四角形、四角形、虹の4つの異なる機能を作成します。 そのような場合は4つのクラスを作成してください。 次に、JavaScript関数のshapeに従ってconvasクラスの値を設定します。 円ボタンをクリックすると同様です。 最初に設定されたHTMLコード。

<button id = "circle" onclick ="circle"></button> 

このボタンをクリックすると、サークル関数のようなサークル関数のコードがJavaScriptで呼び出されます。

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