将对象或函数添加到 html dom 元素（特别是画布）

Question

我正在尝试将我自己的对象参数添加到画布元素中，就像在 jquery 中一样（就像它将 element_id.draggable、element_id.resizable 等添加到 dom 元素中一样）。我的一段代码如下所示：

window.addEventListener("DOMContentLoaded",handler,false);
function handler()
{
     HTMLCanvasElement.prototype.animateLine=function(x1,x2,y1,y2,params) {
     if(params)
             init(this,x1,x2,y1,y2,params.lineColour,params.lineWidth,params.divisions,params.totalTime,params.callback);
     else
             init(this,x1,x2,y1,y2);
     };
}

这样当用户声明一个canvas标签时，就可以直接调用canvas_id.animateLine()来执行上述函数。

但出现的问题是，当用户在body onload或window onload中调用animateLine()时，它不起作用（说animateLine未定义）。

我想知道这是实现它的正确方法吗？另外，由于我也必须在 body/window onload 上调用它，因此如何从上述代码中删除错误？

编辑：更新代码以在 DOM 就绪时调用函数，但如果用户在 DOM 就绪时调用 animateLine，它仍然不起作用。有什么解决办法吗？

Answer 1

您似乎有两个问题：您并没有真正将您的 init 函数添加到 window.onload，您需要在 onload 之后删除 ()。此外，它可能只是被其他任务覆盖。请改用适当的事件侦听器。

其次，你的函数只执行一次。它等待onload，然后四处寻找它可以找到（当时）的所有canvas元素，并为每个元素添加一个（不同的）函数。

如果您真的想为每个存在的画布元素添加一个函数（您可以动态创建它们），您需要将您的方法添加到HTMLCanvasElement.prototype。然而，有一篇关于What’s wrong with extending the DOM 的好文章。阅读并使用另一种解决方案，例如建议的对象包装器。如果你使用 jQuery 或类似的 lib，你可以编写 animateLine 作为插件。

Answer 2

将函数分配给事件的正确方法如下：

window.onload = function() {...};

另外，将东西（函数、对象、数组等）直接附加到 DOM 元素也是不好的。更好地创建一个对元素进行操作的“接口”：

function ACanvas(id){

    //internal reference
    var canvas = document.getElementById('id');

    //the public interface
    return {
        draw : function(){
            //drawing logic that operates on "canvas"
        },
        erase : function(){
            //erase logic that operates on "canvas"
        }
    }
}

var myCanvas = ACanvas('mycanvasid'); //wrap the element
myCanvas.draw();                      //operate
myCanvas.erase();                     //operate