0

下面的代码功能类似于 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);});



    }

}
4

2 回答 2

0 
<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>
于 2013-02-19T12:03:28.160 回答
0

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

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

在 mousedown 处理程序中：

-- 保存鼠标落下时的lastX和lastY位置

--设置一个标志，表示鼠标已按下

在 mousemove 处理程序中：

-- 如果 mousedown 标志为假，则什么也不做。

--如果 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>
于 2013-02-20T00:21:35.053 回答