向html dom元素（特别是画布）添加对象或函数_Dom_Javascript Objects_Javascript_Onload Event

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

dom javascript

向html dom元素（特别是画布）添加对象或函数,dom,javascript-objects,javascript,onload-event,Dom,Javascript Objects,Javascript,Onload Event,我正在尝试将我自己的对象参数添加到画布元素中，如jquery中的那样（比如它将element_id.draggable、element_id.resizeable等添加到dom元素中）。我的代码如下所示： window.addEventListener("DOMContentLoaded",handler,false); function handler() { HTMLCanvasElement.prototype.animateLine=function(x1,x2,y1,y2,p

我正在尝试将我自己的对象参数添加到画布元素中，如jquery中的那样（比如它将element_id.draggable、element_id.resizeable等添加到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);
     };
}

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

因此，当用户声明canvas标记时，他可以直接调用

canvas\u id.animateLine（）

来执行上述函数

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

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

EDIT：更新了在DOM就绪时调用函数的代码，但如果用户在DOM就绪时调用animateLine，该代码仍将不起作用。有什么解决办法吗？

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

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

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

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

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

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

您似乎有两个问题：您没有真正将init函数添加到

窗口。onload

，您需要在

onload

之后删除

（）

。而且，它可能只是被另一个赋值覆盖了。使用适当的事件侦听器

其次，您的函数只执行一次。它等待

onload

，然后查找（当时）它能找到的所有

canvas

元素，并为每个元素添加一个（不同的）函数

如果您真的想将函数添加到每个画布元素中（您可以动态创建它们），则需要将方法添加到

htmlcanvaseelement.prototype

。然而，有一篇关于这个问题的好文章。阅读并使用另一种解决方案，例如建议的对象包装器。如果您使用jQuery或类似的库，您可以编写

animateLine

作为插件。