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帆布选择？

回答

相关问题