html5帆布選擇？

-1

是否可以在html5畫布上創建多選/瑣事？沿着多個選擇將會有猜測圖像（內容將不僅僅是文字）例如它包含30個問題並隨機顯示10個問題，每個屏幕有1個問題（比如，如果回答完一個問題，屏幕將滑動到另一個問題 - 另一個問題是隱藏的）html5帆布選擇？

我一派，它涉及到使用像appcobra什麼東西的應用程序，但我不能使用應用程序來創建HTML5畫布實施，

，如果有可能的話，有沒有任何教程或參考來了解它？預先感謝您。 :)

來源

2013-08-26 Skinny Totoro

這就像問是否可以用Photoshop製作視頻遊戲一樣。嗯，是的，但它只是一個更大的謎題。 –

您可能會看看我的[**畫布GUI **]（http://cssdeck.com/labs/ebmkdf4p）工作正在進行中以幫助您。我所擁有的大多數可以在你的情況下被拿出 –

我剛剛完成了一個需要問題和按鈕的HTML5畫布項目。當你到達問題頁面時，音頻會播放，然後你可以點擊A，B，C，D，它會檢查你是否得到答案是正確的。我沒有找到具體的教程，你正在尋找什麼。

您將使用html5 canvas的主要內容是顯示問題和檢測用戶交互。

爲每個元素創建一個圖層：文本，背景，按鈕。

使用canvastext.com作爲文本，它有助於使用自動換行和樣式。

然後，您可以使用漸變或圖像作爲按鈕。您需要有一個監聽器，用於在按下按鈕的位置處檢測到鼠標單擊。

讓我知道如果您有任何具體問題如何做到上述。我也按照你的描述創建了一個java applet。我也找不到任何在線教程，但編程BC更容易，我對Java更加舒適。

來源

2013-08-26 23:59:23 woodlumhoodlum

是的，這就是我想要做的。這只是..我想在/使用HTML5畫布..一些其他來源告訴我使用JS，我的意思是，也可以，但它可以在畫布或內容...你能幫我這個嗎？因爲您的描述與我想要的完全匹配：D或任何電子郵件，我可以與您聯繫？預先感謝您 –

[email protected] – woodlumhoodlum

這是完全可能的，但作爲畫布是一個被動元素（它不知道它的內容，而不是像素緩衝區），你將需要自己實現按鈕邏輯。

我會在這種情況下推薦使用純HTML（5）和CSS3（它支持動畫，你可以用來製作幻燈片效果等）。

但是，你問的帆布，下面是按鈕點擊檢測的例子，你可以通過你的需求 -

定義按鈕區域：

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

渲染的按鈕：

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

現在你可以點擊點擊回調（或者如果你想改變鼠標的顏色，而不是使用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。

來源

2013-08-27 07:04:07 K3N

html5帆布選擇？

回答

相關問題