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 回答