canvas 按钮html5,html - HTML5 canvas at button click? - Stack Overflow

How about “Keeping It Simple”

Create a form that asks all your setup questions.

Put your canvas directly on top of the form and hide it.

When the user has answered their questions: hide the form, show the canvas.

Draw on your canvas.

No need to reinvent any wheels…just HTML.

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;}

$(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

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

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(){});

How many Circles

How many Rectangles

Play