0

私の観点からは、私は正しい方法で何かをやっています。ページが読み込まれたらスクリプトを開始します。構文は問題ありません。私が推測する問題は、init関数がロードされないことです.誰かが私の失敗を犯した場所を指摘してもらえますか?

var canvas;
    var ctx;
    var x = 75;
    var y = 50;
    var r = 100;
    var width = 400;
    var height = 300;
    var drag = false;

    addEventListener("load",windowLoaded,false);

    function windowLoaded(){
        init();
        console.log("beertje");
    }

    function init() {
     canvas = document.getElementById("canvas");
     ctx = canvas.getContext("2d");
     return setInterval(Circle, 10);
     canvas.onmousedown = myDown;
     canvas.onmouseup = myUp;
     console.log("beertje");


    }

    function Circle(x,y,r) {
     ctx.beginPath();
     ctx.arc(x,y,r,0,Math.PI,true);
     ctx.closePath();
     ctx.fill();
     }

     function draw() {
     clear();
     arc(x,y,r,0,Math.PI,true);
     ctx.fillStyle = "#444444";
     arc(x - 15, y - 15, r, 0, Math.PI, true);
    }

    function myMove(e){
     if (drag){
      x = e.pageX - canvas.offsetLeft;
      y = e.pageY - canvas.offsetTop;
     }
    }

    function myDown(e){
     if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
     canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
     e.pageY > y -15 + canvas.offsetTop){
      x = e.pageX - canvas.offsetLeft;
      y = e.pageY - canvas.offsetTop;
      drag = true;
      canvas.onmousemove = myMove;
     }
    }

    function myUp(){
     drag = false;
     canvas.onmousemove = null;
    }
4

1 に答える 1

1

コードの最初の問題は、引数なしsetInterval()で呼び出すです。Circle()それにもかかわらず、 globalxとがyあり、同じ名前の引数がグローバルをシャドーするためr、これらは 内で定義されていません。Circle()(機能範囲)

Circle()ただし、これらのグローバル値を次のように渡すことができます。

 return setInterval(function () {
            Circle(x, y, r);
        }, 10);

しかし、これは非常にメモリを消費するコードです。同じ円が 1 秒間に 100 回描画されるため、数分で画面上に大量の円が表示されることになります。円はイベント ハンドラのみで描画することをお勧めします。 、タイマーなし。

また、この間隔をどこにも返す必要はありません (これがコードの一部にすぎず、 にレシーバーがある場合を除きますwindowLoaded())。

「余分な」returnが原因で、イベントハンドラの割り当ては役に立ちません。init()これは、return上記が実行を に戻すためwindowLoaded()です。したがって、残りの関数は決して実行されません。return（現時点では役に立たない）または行全体を関数の最後に移動することをお勧めします。

于 2012-12-14T13:12:30.027 に答える