1

キャンバスを初期化する前に、ユーザーが選択できるオプションを含むメニューを作成したいと考えています。どうすればいいですか？オプションを作成したいのですが、ユーザーがボタンをクリックすると、前のページの値を使用してページがキャンバスになります (どのように渡すことができますか?)

最良の方法は、キャンバス上の値を増減するスライダーを配置することです (入力タイプの範囲?) キャンバスに何らかの形でフォームを追加できますか?

4

1 に答える 1

3

「シンプルに保つ」はいかがですか</p>

  • セットアップに関するすべての質問をするフォームを作成します。
  • キャンバスをフォームの上に直接置き、非表示にします。
  • ユーザーが質問に答えたら、フォームを非表示にし、キャンバスを表示します。
  • キャンバスに描画します。

車輪を再発明する必要はなく、HTML だけです。

ここにコードとフィドルがあります： http://jsfiddle.net/m1erickson/jr4rX/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    #container{position:relative; width:300px; height:300px;}
    #setup #canvas{
        position:absolute; top:10px; left:10px;
        width:100%; height:100%;
    }
    #setup{padding:10px; border:1px solid blue;}
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    // Hide the canvas while getting user info on form
    $("#canvas").hide();

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    function playGame(circles,rects){

        // hide the completed form and show the canvas
        $("#setup").hide();
        $("#canvas").show();


        // draw user's circles
        ctx.fillStyle="blue";
        for(var n=0;n<circles;n++){
            ctx.save();
            ctx.beginPath();
            ctx.arc(n*25+15,25,10,0,Math.PI*2,false);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        }

        // draw user's rectangles
        ctx.fillStyle="green";
        for(var n=0;n<rects;n++){
            ctx.save();
            ctx.beginPath();
            ctx.rect(n*20+5,75,10,10);
            ctx.fill();
            ctx.restore();
        }
    }

    $("#play").click(function(){ 

        var circleCount=$("#circles").val();
        var rectangleCount=$("#rectangles").val();

        playGame( circleCount, rectangleCount ); 

    });

}); // end $(function(){});
</script>

</head>

<body>

    <div id="container">

        <div id="setup">
            How many Circles<input type="range" id="circles" min="1" max="10"><br>
            How many Rectangles<input type="range" id="rectangles" min="1" max="10"><br>
            <button id="play">Play</button>
        </div>    

        <canvas id="canvas"></canvas>

    </div>

</body>
</html>
于 2013-05-09T17:29:05.200 に答える