html5 캔버스?

Question

html5 canvas에서 객관식/퀴즈를 만들 수 있습니까? 예를 들어 개의 질문이 30 개 있고 무작위로 10 개의 질문을 표시합니다 (예 : 1 개의 질문에 답하면 화면이 슬라이드로 바뀝니다) 의 이미지를 추측합니다. 또 다른 질문 - 상기 다른 질문이 숨겨져)

내가 봤하고 appcobra 뭔가 뭔가 같은 응용 프로그램을 사용하여 제공하지만 HTML5 캔버스 구현을 생성하는 응용 프로그램을 사용하지 않을 수

하고 가능하다면 그래서, 그것에 대해 배우기위한 튜토리얼이나 참고 자료가 있습니까? 미리 감사드립니다. :)

Answer 1

방금 ​​질문 및 버튼이 필요한 HTML5 캔버스 프로젝트를 완료했습니다. 질문 페이지에 도착했을 때 오디오가 재생되고 A, B, C, D를 클릭하면 확인할 수 있습니다. 대답의 권리. 특별히 찾고있는 튜토리얼을 찾지 못했습니다.

html5 캔버스를 사용할 때 가장 중요한 것은 질문을 표시하고 사용자 상호 작용을 감지하는 것입니다.

텍스트, 배경, 버튼과 같은 각 요소에 대한 레이어를 만듭니다.

canvastext.com을 텍스트로 사용하면 단어 줄 바꾸기 및 스타일 지정에 도움이됩니다.

그러면 그라디언트 나 이미지를 버튼으로 사용할 수 있습니다. 버튼을 누른 위치의 좌표에서 마우스 클릭을 감지하는 리스너가 있어야합니다.

위 작업을 수행하는 방법에 대해 궁금한 점이 있으면 알려주십시오. 필자가 설명한대로 자바 애플릿을 만들었습니다. 나는 그것에 대한 온라인 튜토리얼을 찾을 수 없었지만 BC를 프로그래밍하는 것이 더 쉬웠다. 나는 자바가 더 편하다.

Answer 2

캔버스는 수동 요소이기 때문에 (픽셀 버퍼가 아닌 다른 내용은 알지 못합니다) 버튼 논리를 직접 구현해야합니다.

일반 HTML (5) 및 CSS3 (슬라이드 효과 등을 만드는 데 사용할 수있는 애니메이션을 지원)을 사용하는 것이 좋습니다.

for(; b = buttons[i]; i++) 
    ctx.rect(b[0], b[1], b[2], b[3]); 

/// simple buttons in this example.. 
ctx.fillStyle = '#F90'; 
ctx.fill(); 

: 버튼을 렌더링

var buttons = [ 
    [10, 10, 50, 30], 
    [70, 10, 50, 30], 
    [130, 10, 50, 30] 
]; 

:

버튼 영역을 정의 - 당신은 캔버스 요청으로

그러나, 여기 당신은 여러분의 필요에 채택 할 수있는 버튼을 클릭 감지에 대한 예입니다

이제 클릭 콜백을 사용할 수 있습니다 (또는 마우스 다운시 색상을 변경하려면 onmousedown/up 콜백을 사용하십시오) :

canvas.onclick = function(e) { 

    /// adjust mouse position to relative to canvas: 
    var r = canvas.getBoundingClientRect(), 
     x = e.clientX - r.left, 
     y = e.clientY - r.top, 
     i = 0, b; 

    /// check if x/y is within any of the buttons 
    for(; b = buttons[i]; i++) { 
     if (x > b[0] && x < b[0] + b[2] && 
      y > b[1] && y < b[1] + b[3]) { 

      /// we got a hit - handle button 
      alert('Button ' + i + ' was clicked!'); 
      return; 
     } 
    }  
} 

Here is an online demo.