Question

我继续使用HTML5 Canvas和JavaScript进行实验。我继续为我的孩子们制作一个简单的互动游戏。这是我的模板的jsfiddle：jsfiddle.net/LmCwZ/
问题是我如何使用每个选项卡并将其单独填入内容？因为在其中一些我想插入图像和文本。提前谢谢。

Answer 1

您可以简单地扩展具有更多属性的对象来保存您的内容，例如文本，图像或绘图命令等。

例如，要添加文字功能：

var Tab = function(id, x, y, width, height, text, color) {

    ...snipped

    this.content = null;

    ...snipped

然后在创建选项卡（或扩展其构造函数）之后定义文本：

myTab.content = 'Text for this tab!';

现在，在更新方法中，如果有以下内容，您可以呈现当前标签的文本：

function showContent(tab) {
    ctx.fillStyle = tab.color;
    ctx.fillRect(0, tab.height, ctx.canvas.width, 700);

    // has text?   
    if (tab.content !== null) {
        ctx.fillStyle = tab.textColor;
        ctx.textAlign = 'left';
        ctx.font = '40px sans-serif';
        ctx.fillText(tab.content, 30, 160);
    }
}

<强> Updated fiddle here

文本颜色，位置可以很容易地成为对象属性的一部分（tab.textX，tab.textY等）。

使用这种方法，你不需要担心索引（虽然这是一个不错的选择），因为对象中的所有内容都是自包含的。

对图像执行相同操作但要注意图像加载是异步的，因此将图像对象本身存储在选项卡对象上而不是网址（或使用构造函数阶段预加载图像）是有利的。 / p>

此外，您必须手动设置文本格式，因为这是画布（或者将SVG与画布结合使用以获得更复杂的内容，如show in this article）。这包括文字换行，行等。

如果您需要在每个标签中使用高级格式，我建议使用标准HTML和CSS，而不是使用画布。

操作菜单中每个选项卡的活动内容区域

1 个答案: