javascript - IE で HTML5 キャンバスイベントが正しく機能しない

Question

以下のコードは、MSpaint の鉛筆ツールのように機能します。以下のコードは、IE を除くすべてのブラウザーで適切に機能します。IE でキャンバスタグを実行するスクリプトファイルを含めたので、IE でエラーは発生しません。IE でフリーハンドの線を描画します。他のブラウザでは動作するため、正しく動作しません。マウスをゆっくり動かすと、しばらくは動作しますが、IE でマウスをクリックして動かしても描画が停止します。どのような変更を加える必要がありますか?

-init メソッドは body タグのロード時に呼び出されます

var canvas;
var ctx;
var canX;
var canY;
var rltvX;
var rltvY;
var x = "black";
var flag = false;
var w, h;
function findxy(res, e) 
{

    if (res == 'down') 
    {
        canX = e.clientX - canvas.offsetLeft - 10;
        canY = e.clientY - canvas.offsetTop - 35;
        flag = true;
        dot_flag = true;
        if (dot_flag) 
        {
            ctx.beginPath();
            ctx.fillStyle = x;
            ctx.fillRect(canX, canY, 2, 2);
            ctx.closePath();
            dot_flag = false;
        }
    }
    if (res == 'up' || res == "out") 
    {
        flag = false;
        flag = false;
    }
    if (res == 'move') 
    {
        if (flag) {
            rltvX = canX;
            rltvY = canY;
            canX = e.clientX - canvas.offsetLeft - 10;
            canY = e.clientY - canvas.offsetTop - 35;
            ctx.beginPath();
            ctx.moveTo(rltvX, rltvY);
            ctx.lineTo(canX, canY);
            ctx.strokeStyle = x;
            ctx.lineWidth = 2;
            ctx.stroke();
            ctx.closePath();
        }
    }
}



function init() 
{

    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    w = canvas.width;
    h = canvas.height;


    if (canvas.addEventListener) 
    {
        canvas.addEventListener("mousemove", function(e) {
            findxy('move', e);
        }, false);
        canvas.addEventListener("mousedown", function(e) {
            findxy('down', e);
        }, false);
        canvas.addEventListener("mouseup", function(e) {
            findxy('up', e);
        }, false);
        canvas.addEventListener("mouseout", function(e) {
            findxy('out', e);
        }, false);

    } else {

        canvas.attachEvent("onmousemove", function(e) {findxy('move', e);});
        canvas.attachEvent("onmousedown", function(e) {findxy('down', e);});
        canvas.attachEvent("onmouseup", function(e) {findxy('up', e);});
        canvas.attachEvent("onmouseout", function(e) {findxy('out', e);});



    }

}

score 0 · Accepted Answer

<html>
<head>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>

<script>
var flag = false;
$(function(){

var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;


var ctx;
var canvas;
var canMouseX;
var canMouseY;
var rltvX;
var rltvY;
var x = "black";



//ctx = $("#canvas").getContext("2d");
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");


function handleMouseDown(e){
  canMouseX=parseInt(e.clientX-offsetX);
  canMouseY=parseInt(e.clientY-offsetY);
  $("#downlog").html("Down: "+ canMouseX + " / " + canMouseY);

  // Put your mousedown stuff here
    flag = true;
    dot_flag = true;
    if (dot_flag) {
        ctx.beginPath();
        ctx.fillStyle = x;
        ctx.fillRect(canMouseX, canMouseY, 2, 2);
        ctx.closePath();
        dot_flag = false;
    }   
}

function handleMouseUp(e){
  canMouseX=parseInt(e.clientX-offsetX);
  canMouseY=parseInt(e.clientY-offsetY);
  $("#uplog").html("Up: "+ canMouseX + " / " + canMouseY);


  // Put your mouseup stuff here
  flag = false;
}

function handleMouseOut(e){
  canMouseX=parseInt(e.clientX-offsetX);
  canMouseY=parseInt(e.clientY-offsetY);
  $("#outlog").html("Out: "+ canMouseX + " / " + canMouseY);


  // Put your mouseOut stuff here
  flag = false;
}

function handleMouseMove(e){
    //canMouseX=parseInt(e.clientX-offsetX);
    //canMouseY=parseInt(e.clientY-offsetY);
   $("#movelog").html("Move: "+ canMouseX + " / " + canMouseY);

  // Put your mousemove stuff here
    if (flag) {

        rltvX = canMouseX;
        rltvY = canMouseY;

        canMouseX=parseInt(e.clientX-offsetX);
        canMouseY=parseInt(e.clientY-offsetY);           

        ctx.beginPath();
        ctx.moveTo(rltvX, rltvY);
        ctx.lineTo(canMouseX, canMouseY);
        ctx.strokeStyle = x;
        ctx.lineWidth = 2;
        ctx.stroke();
        ctx.closePath();
    }
}




$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});

}); // end $(function(){});
</script>

</head>

<body>

<p id="downlog">Down</p>
<p id="movelog">Move</p>
<p id="uplog">Up</p>
<p id="outlog">Out</p>
<canvas id="canvas" width=300 height=300></canvas>

</body>
</html>

score 0 · Accepted Answer

申し訳ありませんが、あなたのコードのいずれも、3 つの主要なブラウザーのいずれでも実行できませんでした。

キャンバスに「鉛筆」で描画するための基本的な戦略は次のとおりです。

マウスダウンハンドラーで:

-- マウスが下がったときのマウスの lastX と lastY の位置を保存します。

-- マウスがダウンしていることを示すフラグを設定します

mousemove ハンドラーで:

-- mousedown フラグが false の場合、何もしません。

-- mousedown フラグが true の場合:

----lastX/lastY から現在のマウス x/y まで線を引く

----lastX/lastY を現在のマウスの x/y に設定します

mouseup および mouseout ハンドラーで:

-- マウスダウンフラグをクリアします。

ここにコードとフィドルがあります： http://jsfiddle.net/m1erickson/hJ9Lt/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var lastX;
    var lastY;
    var strokeColor="red";
    var strokeWidth=2;
    var canMouseX;
    var canMouseY;
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var isMouseDown=false;


    function handleMouseDown(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
      $("#downlog").html("Down: "+ canMouseX + " / " + canMouseY);

      // Put your mousedown stuff here
      lastX=canMouseX;
      lastY=canMouseY;
      isMouseDown=true;
    }

    function handleMouseUp(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
      $("#uplog").html("Up: "+ canMouseX + " / " + canMouseY);

      // Put your mouseup stuff here
      isMouseDown=false;
    }

    function handleMouseOut(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
      $("#outlog").html("Out: "+ canMouseX + " / " + canMouseY);

      // Put your mouseOut stuff here
      isMouseDown=false;
    }

    function handleMouseMove(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
      $("#movelog").html("Move: "+ canMouseX + " / " + canMouseY);

      // Put your mousemove stuff here
      if(isMouseDown){
          ctx.beginPath();
          ctx.moveTo(lastX,lastY);
          ctx.lineTo(canMouseX,canMouseY);
          ctx.stroke();     
          lastX=canMouseX;
          lastY=canMouseY;
      }
    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});

}); // end $(function(){});
</script>

</head>

<body>

    <p id="downlog">Down</p>
    <p id="movelog">Move</p>
    <p id="uplog">Up</p>
    <p id="outlog">Out</p>
    <canvas id="canvas" width=300 height=300></canvas>

</body>
</html>

javascript - IE で HTML5 キャンバス イベントが正しく機能しない

2 に答える 2

Related

Reference

javascript - IE で HTML5 キャンバスイベントが正しく機能しない