點擊按鈕時的HTML5畫布？

我想製作一個菜單，讓用戶在初始化畫布之前選擇。我該怎麼辦？我想作出選擇，用戶點擊按鈕和頁面成爲畫布使用前一頁的值（我怎麼能通過它們？）點擊按鈕時的HTML5畫布？

最好的事情是將滑塊增加/減少（輸入類型範圍？）值在畫布上，但我可以以某種方式將畫布添加到畫布上嗎？

2013-05-09 Fengson

當然，你可以「一個窗體添加到畫布」，只要你樂意寫全自己的GUI（邏輯）代碼將在表單上繪製的控件。要麼，要麼使用已經在別處創建的輪子。我已經看過很多類似的圖書館。 Bejeweled（谷歌Chrome瀏覽器的應用程序遊戲）正是如此 - 在畫布上繪製菜單和控件。 – enhzflep 2013-05-09 15:36:47

如何「保持簡單」

創建要求所有設置問題的一種形式。
將您的畫布直接放在窗體頂部並隱藏它。
當用戶回答他們的問題時：隱藏表格，顯示畫布。
在您的畫布上繪製。

沒有必要重新發明任何輪子......只是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-09 17:29:05 markE

非常有趣，謝謝！但有一個問題。在畫布上製作表單難嗎？我的項目是彈跳球，我想看重力和速度的變化。雖然你的代碼很棒，但會有點麻煩:) 或者也許在畫布上的按鈕回到選項？（主頁）？ – Fengson 2013-05-09 19:11:20

是的，創建自己的表單控件比較困難 - 編碼器的難度有多大。如何將重力和速度的範圍控件放置在畫布下方，而不是隱藏它們？或者將它們放在畫布的最底部（範圍控件非常小巧整齊）。或者，您可以像Acrobat-PDF和視頻播放器那樣做......將範圍控件放在畫布的底部，並使其僅在用戶懸停在畫布上時才顯示。我*不*嘗試向您推送HTML5控件，他們只是隨時可用+調試+靈活+易於實現+特定任務。 – markE 2013-05-09 19:37:49

我不是那種先進的，只是盯着旅程:) 將控件放在側面/底部會很好，但我的畫布可以調整大小，100％的屏幕。我將不得不犧牲這個功能，不是嗎？請把我的項目拿出來。控件還沒有工作。只需點擊播放，然後通過拖放來製作路徑:) 鏈接：http://www.ii.uj.edu.pl/~kadluczs/MiSK/ – Fengson 2013-05-09 20:00:48

點擊按鈕時的HTML5畫布？

回答

相關問題