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

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

在这里更新小提琴

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

使用这种方法，您不必担心索引（尽管这是一个不错的选择），因为所有内容都是独立存在于对象中的。

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

另外，您必须手动将文本设置为画布格式（或将SVG与画布结合使用，以获得更复杂的内容，如我在本文中所示 ）。 这包括文字换行，线条等。

如果您需要每个选项卡中的高级格式，我建议您使用标准HTML和CSS而不是使用canvas。