버튼 클릭시 HTML5 캔버스?

캔버스를 초기화하기 전에 사용자가 선택할 수있는 옵션이있는 메뉴를 만들고 싶습니다. 어떻게해야합니까? 나는 옵션을 만들고, 사용자 클릭 버튼을 만들고, 페이지는 캔버스가된다. 이전 페이지의 값을 사용한다. (어떻게 할 수 있는가?)버튼 클릭시 HTML5 캔버스?

가장 좋은 것은 슬라이더를 증가/감소 (입력 유형 범위?) 값 캔버스에 폼을 추가 할 수 있습니까?

출처

2013-05-09 Fengson

당신이 너무 오래 당신이 당신의 자신의 GUI를 모두 쓸 행복으로, '캔버스에 양식을 추가'할 수 있는지 (논리) 코드 :

는 다음 코드와 바이올린의 양식에 그려지는 컨트롤. 어느 쪽이든, 또는 이미 다른 곳에서 만들어진 휠을 사용하십시오. 이런 종류의 라이브러리를 여러 번 보았습니다. Bejeweled (Google 크롬 '앱'게임)은 정확하게 이것을 수행합니다. 캔버스에 메뉴와 컨트롤을 그립니다. – enhzflep

방법에 대해

의 모든 설정 질문을 폼을 만들고 "그것은 간단한 유지".
캔버스를 양식 위에 직접 놓고 숨 깁니다.
사용자가 질문에 답변 한 경우 : 양식을 숨기고 캔버스를 표시하십시오.
캔버스에 그림을 그립니다.

바퀴를 다시 만들 필요가 없습니다 ... 단지 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

네, 폼 컨트롤을 직접 만드는 것은 어렵습니다. 중력 및 속도에 대한 범위 컨트롤을 캔버스 바로 아래에 배치하고 숨기지 않는 방법은 무엇입니까? 또는 캔버스 맨 아래에 배치하십시오 (범위 컨트롤은 매우 작고 깔끔합니다). 또는 Acrobat-PDF 및 비디오 플레이어처럼 할 수 있습니다. 캔바스 아래쪽에 범위 컨트롤을 배치하고 사용자가 위에 놓은 경우에만 범위 컨트롤을 표시합니다. HTML5 컨트롤을 사용자에게 푸시하지 않고 바로 사용할 수 있습니다. + 디버깅 + 유연 + 구현하기 쉬운 + 작업 관련. – markE

나는 그다지 진보하지 않고 여행을 꼼짝 않고 바라보고있다. 컨트롤을 옆/아래에 두는 것이 좋지만 내 캔버스는 화면의 100 % 크기 조정이 가능하다. 나는이 특성을 희생해야 할 것이다. 그렇지 않습니까? 제발, 내 프로젝트를 chack. 컨트롤이 아직 작동하지 않습니다. 재생을 클릭 한 다음 드래그 앤 드롭으로 경로를 만듭니다. 링크 : http://www.ii.uj.edu.pl/~kadluczs/MiSK/ – Fengson

버튼 클릭시 HTML5 캔버스?

답변

관련 문제