1

jqueryのように独自のオブジェクトパラメータをcanvas要素に追加しようとしています（dom要素にelement_id.draggable、element_id.resizableなどを追加するように）。私のコードは次のようになります。

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_id.animateLine()て上記の関数を実行できます。

ただし、発生する問題は、ユーザーがbodyonloadまたはwindowonloadでanimateLine（）を呼び出すと、機能しないことです（animateLineが未定義であると言います）。

これがこれを実装する正しい方法であることを知りたかったのですか？また、body / window onloadでエラーを呼び出す必要があるため、上記のコードからエラーを削除するにはどうすればよいですか？

編集：DOM Readyで関数を呼び出すようにコードを更新しましたが、ユーザーがDOMReadyでanimateLineを呼び出した場合でも機能しません。これに対する解決策はありますか？

4

2 に答える 2

1

あなたは2つの問題を抱えているようです：あなたは実際にあなたのinit関数をに追加しません、あなたはafterwindow.onloadを削除する必要があるでしょう。また、他の割り当てによって上書きされている可能性もあります。代わりに、適切なイベントリスナーを使用してください。()onload

次に、関数は1回だけ実行されます。を待ってから、（その時点で）見つけることができるonloadすべてのcanvas要素を探し、それぞれに（異なる）関数を追加します。

これまでに存在するすべてのキャンバス要素に関数を本当に追加したい場合（動的に作成できます）、メソッドをに追加する必要がありますHTMLCanvasElement.prototype。それでも、 DOMの拡張の何が問題になっているのかについての良い記事があります。それを読んで、提案されたオブジェクトラッパーなどの別のソリューションを使用してください。jQueryまたはそのようなライブラリを使用する場合は、animateLineそのプラグインとして作成できます。

于 2012-05-17T12:18:00.530 に答える
0

イベントに関数を割り当てる適切な方法は次のとおりです。

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
于 2012-05-17T12:14:44.837 に答える