Question

下面的代码函数就像MSpaint的铅笔工具一样，下面的代码适用于IE以外的所有浏览器，它在IE中没有出错，因为我已经包含了一个脚本文件，用于在IE中运行canvas标签，绘制写意线在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);});



    }

}

Answer 1

<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>

Answer 2

抱歉，我无法让您的任何代码在3种主流浏览器中运行。

这是在画布上绘制“铅笔”的基本策略：

在mousedown处理程序中：

- 保存鼠标停止时的lastX和lastY位置

- 设置一个标志以指示鼠标已关闭

在mousemove处理程序中：

- 如果mousedown标志为false，则不执行任何操作。

- 如果mousedown标志为真：

----从lastX / lastY到当前鼠标x / y

画一条线

----将lastX / lastY设置为当前鼠标x / y

在mouseup和mouseout处理程序中：

- 清除mousedown标志

这是代码和小提琴：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>

HTML5画布事件在IE中无法正常工作

2 个答案: