如何在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”，以保留对画布和小部件的引用。 它将使用回调机制来呈现小部件。 每个小部件（即本例中的Button）将具有某种类型的呈现状态（按下，释放）和某种内部状态。 其他小部件的状态可能更复杂。

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

我认为，最好在进入实施阶段之前通过这种方式进行设计，才能更好。 在很大程度上取决于您真正想要的是什么。 :)

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