HTML5 canvas at button click? -
i want make menu options user choose before initializing canvas. how can it? want make options, user clicks button , page becomes canvas using values previous page (how can pass them?)
the best thing put sliders increase/decrease (input type range?) value on canvas, can add form canvas somehow?
how “keeping simple”
- create form asks setup questions.
- put canvas directly on top of form , hide it.
- when user has answered questions: hide form, show canvas.
- draw on canvas.
no need reinvent wheels…just html.
here’s code , fiddle: 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 canvas while getting user info on form $("#canvas").hide(); var canvas=document.getelementbyid("canvas"); var ctx=canvas.getcontext("2d"); function playgame(circles,rects){ // hide completed form , show 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> 
Comments
Post a Comment