Question

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

我用谷歌搜索，它使用像appcobra这样的应用程序但我无法使用app创建html5 canvas实现，

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

Answer 1

我刚刚完成了一个需要问题和按钮的HTML5画布项目。当你到达问题页面时，音频会播放，然后你可以点击A，B，C，D，它会检查你是否得到了正确答案。我没有找到具体你想要的教程。

您将使用html5 canvas进行的主要操作是显示问题并检测用户交互。

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

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

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

如果您对如何执行上述操作有任何具体问题，请与我们联系。我还完全按照你的描述创建了一个java applet。我也找不到任何在线教程，但是编程更容易bc我对java更舒服。

Answer 2

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

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

html5画布有多种选择？

2 个答案: