如何在 JavaScript 类中正确使用 HTML5 的画布？

Question

首先，我使用术语“类”来表示具有原型的函数，这些函数可能位于与我正在处理的主初始化文件不同的单独文件中。

现在我的问题/问题： 我正在努力用 JavaScript/HTML5 构建一些东西，并尝试“正确”地对其进行编程（即使用我希望标准格式的原型）。在我的主 JavaScript 文件中，我有一些方法创建了使用一个实例（基本上是我的 OOP/基于原型的脚本的根实例）来设置画布。

我还加载了另一个文件，其中包含用于创建可单击按钮的“类”。截至目前，我只是试图让按钮在画布上绘制，但是，我无法访问画布的实例，因为我相信该实例超出了范围（这很好，我不希望我所做的一切都包含用于引用实例的长点符号）。然而，当尝试在画布上绘制矩形时，考虑到按钮所在的“类”，这给我带来了麻烦，无法引用其外部的上下文。

我通过使用以下内容找到了解决此问题的方法：

function CreateButton(btn_x, btn_y, btn_width, btn_height, btn_txt) {

    // ... (check and define parameters)

    CreateButton.prototype.custom_canvas = document.getElementById('root_canvas');
    CreateButton.prototype.ctxt = this.custom_canvas.getContext('2d');

    CreateButton.prototype.ctxt.fillStyle = '#666666';
    CreateButton.prototype.ctxt.fillRect(this.x, this.y, this.width, this.height);
}

基本上，它是在画布上用同名画布书写的？我假设我之后仍然可以操作常规画布，并且它就像单个画布元素一样。我担心添加很多东西时在画布上重画可能会占用大量内存，但是，无论采用哪种方法，都无法避免在画布上写入（即使在同一范围内）。

有什么建议或帮助吗？或者我在不同类中使用相同画布的方法是否可以接受？

感谢您的任何反馈。

[更新] 嗯，也许我应该尝试将上下文作为参数传递并使用它。

...或者我应该将画布设为全局对象？有什么建议吗？

Answer 1

我想您可以尝试实现某种“WidgetManager”，它保留对画布和小部件的引用。它将使用回调机制来渲染小部件。每个小部件（即本例中的按钮）将具有某种渲染状态（按下、释放）和某种内部状态。其他小部件可能具有更复杂的状态。

请注意，“WidgetManager”可能应该跟踪小部件“z”和用户按下的操作（哪个小部件被击中）。基于此，它应该能够触发绑定到小部件的处理程序。在某种程度上，您必须重新发明基本 UI 库已经做的事情。 :)

我认为在进入实施阶段之前以这种方式制定设计会更好。很大程度上取决于你真正想用它做什么。 :)

请注意，您可以通过使用多个 canvasii 而不是仅使用一个来简化渲染和检查。在这种情况下，您将不得不处理 z-index 和绝对定位，但至少您可以利用一些现有的东西，而不必自己实现。