Question

我想在初始化画布之前创建一个菜单，其中包含供用户选择的选项。我该怎么做？我想制作选项，用户点击按钮和页面变成画布使用上一页的值（我怎么能传递它们？）

最好的方法是在画布上放置滑块增加/减少（输入类型范围？）值，但是我可以以某种方式将某个表单添加到画布中吗？

Answer 1

“保持简单”怎么样

创建一个表单，询问您的所有设置问题。
将画布直接放在表单的顶部并隐藏它。
当用户回答问题时：隐藏表单，显示画布。
在画布上画画。

无需重新发明任何轮子......只需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>

按钮点击HTML5画布？

1 个答案: