html - html5画布多选？

Question

是否可以在 html5 画布上创建多项选择/琐事？沿着多项选择题会有猜测图像（内容不仅是文字），例如它包含 30 个问题并随机显示 10 个问题，每个屏幕 1 个问题（例如，如果回答完一个问题，屏幕将滑动到另一个问题 -另一个问题被隐藏了）

我用谷歌搜索，它涉及到使用像 appcobra 这样的应用程序，但我不能使用应用程序来创建 html5 画布实现，

如果可能的话，是否有任何教程或参考资料可以了解它？先感谢您。:)

Answer 1

我最近刚刚完成了一个需要问题和按钮的 HTML5 画布项目。当您到达问题页面时会播放音频，然后您可以单击 A、B、C、D，它会检查您是否得到正确的答案。我没有找到关于你正在寻找什么的教程。

您将使用 html5 画布的主要功能是显示问题和检测用户交互。

为每个元素创建一个图层：文本、背景、按钮。

使用 canvastext.com 获取文本，它有助于自动换行和样式设置。

然后，您可以使用渐变或图像作为按钮。您将需要有一个侦听器来检测在按下按钮的坐标中的鼠标点击。

如果您对如何执行上述操作有任何具体问题，请告诉我。我还完全按照您的描述创建了一个 Java 小程序。我也找不到任何关于它的在线教程，但它更容易编程，因为我更喜欢使用 java。

Answer 2

这是完全可能的，但由于画布是一个被动元素（它不知道它的内容，除了它是一个像素缓冲区），你需要自己实现按钮逻辑。

在这种情况下，我建议使用纯 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;
        }
    }    
}

这是一个在线演示。