2

そこで、比較的単純な HTML5 Canvas 描画 Web アプリを作成しています。基本的に、色を選択してから 500x500 のキャンバスに描画できます。「落書き」の壁をテーマにする予定なので、昔の MS Paint のスプレー ツールのように、描画に落書き効果を作成しようとしています。
お気軽にこちらをご覧ください。

この効果を促進するために、Web ワーカーを使用して、マウス イベントでコールバックし、キャンバスに非同期的に描画します。私が今持っている素朴な実装は、どのマウスイベントでも、イベントの座標の周りに 5 ピクセルがランダムに描画されるというものです。

私がやりたいことは、mousemove イベントの座標を更新しながら、mousedown イベントから mouseup イベントまでこれらのピクセルを継続的に描画することです。JavaScript に関する私の限られた知識から、これには setTimeout() が含まれる可能性があると想像しますが、これを操作して目的を達成する方法がわかりません。

免責事項: これは学校のプロジェクトの一部であるため、JQuery、Ajax、およびその他のフレームワークを避けようとしています。ここでの私の目標は、可能な限り純粋な JavaScript/HTML5 Web アプリを作成することです。

前もって感謝します。

4

2 に答える 2

3

タイマーの使用（ワーカーは不要）：

var mouseX = 0,
    mouseY = 0,
    mouseDown = false;

    function ev_canvas( ev ) {
        if (ev.offsetX || ev.offsetX == 0) { //opera
            mouseX = ev.offsetX;
            mouxeY = ev.offsetY;
        } else if (ev.layerX || ev.layerX == 0) { //firefox
            var canvasOffset = document.getElementById("graffiti_wall").getBoundingClientRect();
            mouseX = ev.layerX - canvasOffset.left;
            mouseY = ev.layerY - canvasOffset.top;
        }

        if ( ev.type == 'mousedown' ) {
            mouseDown = true;
        }
        else if ( ev.type == 'mouseup' ) {
            mouseDown = false;
        }
    }

    function draw_spray() {
        if( !mouseDown ) {
            //Don't do anything since the mouse is not pressed down
            return;
        }
        //Draw something at the last known location
        context.strokeRect( mouseX, mouseY, 1, 1 );
    }

    //Call draw_spray function continuously every 16 milliseconds
    window.setInterval( draw_spray, 16 );
于 2012-10-25T18:07:40.210 に答える
2

WebWorker を使用する場合 (たとえば、より複雑な描画アルゴリズム用)、次の設定を考えることができます。

  • onmousedown、新しいワーカーを生成し、キャンバスにオブジェクトを描画するハンドラーを登録します
  • onmouseup (および -leave など)、ワーカーを終了します
  • onmousemove、ワーカーが存在する場合、マウス座標を決定し、ワーカーに送信します

労働者では

  • 新しいマウス座標を聞く
  • 常に描画イベントを発生させるタイムアウト間隔を開始します (現在の座標と巧妙なアルゴリズムに依存)

それでも、Worker は単純な落書きツールにはオーバーヘッドが大きすぎると思います。@Esailja が示したように、Worker を使用せずに単純なソリューションを使用します。

ワーカーをうまく利用できるより複雑なアプリケーションがある場合、実際には onmousedown でワーカーを生成して終了することはありません。代わりに、1 種類のツールに対して 1 つの Worker をインスタンス化し、処理開始イベントと処理終了イベントをそれらに発行したとします。

于 2012-10-25T18:40:08.573 に答える