キャンバスにIE9のラグがある線を描く

Question

最近キャンバスを使って簡単なペインタを作成しようとしました。私はmousedownを使って出発点を捕らえた。 mousemoveで私は開始点から現在の点まで直線を描き、開始点を現在の点に置き換えました。最後に、mouseupでイベントハンドラを削除しました。この解決策はChrome、Firefox、Safariで完全に機能しましたが、IE9でテストしたところ、迷惑なバグに遭遇しました。私が描く線は、mouseupイベントの後にのみ現れます。なぜこれが起きているのか、どのように修正すればよいのでしょうか？

問題を示すための簡単なテストページを追加しました http://kfirg.com/rage/main.htm 長い線や円などを描こうとしてください。クロムでは完全に動作しますが、IE9では狂ったように遅れます。

Notes： この単純な画家のためにjQueryとjCanvasを使用しました。キャンバスAPIを使って直接実装しようとしましたが、同じ問題が発生しました。あなたが実際にIEに比べてより多くのバグを持ってhttp://jsfiddle.net/t5QpN/1/

Answer 1

：

はjsFiddleを更新しました。私のテストから、線は散発的に描かれています。

I made a jsFiddle of this to test。

私はちょうどアイデアに答えがありません。私はこのような鉛筆描画のキャンバスアプリを決してダウンしていない、私はマウスがダウンしたときにポーリングでそれをやった。あなたがコンソールを見れば、IEで予想通りにあなたの描画コードが実行されていることは明らかです。マウスの移動は、あなたが望むだけ発射しなければなりません。

だから何ができるか。私はマウスが（1関係）まで

後におそらく、あなたがあまりにも頻繁に描画し、それをオーバーロードされるまで、IEはキャンバスを描画するためのスレッドで何か他のものとあまりにも忙しいです二つ

1. のいずれかを考えています

これらの2つのいずれかが正しい場合は、マウスの位置をミリ秒ごとにポーリングする必要があると思います。それはあなたに滑らかな線を与えるわけではありませんが、見た目が良くなるまでXを調整することができます。

希望すると便利です。

Answer 2

私はあなたのコードがのMouseMoveイベントのために重いだと思う：

var fncMouseMoveHandler = function (e) { 
     console.log('Move!', 'e', { x: e.offsetX, y: e.offsetY }, 'prev', prev); 
     $main_canvas.drawLine({ 
      strokeStyle: settings.color, 
      strokeWidth: 2, 
      strokeCap: "round", 
      strokeJoin: "miter", 
      x1: prev.x, 
      y1: prev.y, 
      x2: e.offsetX, 
      y2: e.offsetY 
     }); 
     prev = { x: e.offsetX, y: e.offsetY }; 
    } 

あなたは、APIを使用してスタイルを適用し、必要のないものを計算しています。あなたは、座標を取得し、で描画 ：描画のためのコードは簡単なことでなければなりません

context.lineTo(x, y); 
context.stroke(); 

あなたのストロークのスタイルがあなたのMouseMoveイベントで定義されるべきではない、キャンバス設定を覚えています。

偉大なチュートリアルでは、オペラのdevのセンターで入手できます。http://dev.opera.com/articles/view/html5-canvas-painting/