javascript - 向下滚动网页后，在鼠标点上在 Canvas 上绘图的行为很奇怪

Question

我在鼠标移动期间使用了以下代码在 Canvas 上绘制。

  <script type="text/javascript">
         var canvas, ctx, flag = false,
             prevX = 0,
             currX = 0,
             prevY = 0,
             currY = 0,
             dot_flag = false;

         var x = "black",
             y = 2;

         function init() {
             canvas = document.getElementById('can');
             ctx = canvas.getContext("2d");
             w = canvas.width;
             h = canvas.height;

             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);
         }

         function color(obj) {
             switch (obj.id) {
                 case "green":
                     x = "green";
                     break;
                 case "blue":
                     x = "blue";
                     break;
                 case "red":
                     x = "red";
                     break;
                 case "yellow":
                     x = "yellow";
                     break;
                 case "orange":
                     x = "orange";
                     break;
                 case "black":
                     x = "black";
                     break;
                 case "white":
                     x = "white";
                     break;
             }
             if (x == "white") y = 14;
             else y = 2;

         }

         function draw() {
             ctx.beginPath();
             ctx.moveTo(prevX, prevY);
             ctx.lineTo(currX, currY);
             ctx.strokeStyle = x;
             ctx.lineWidth = y;
             ctx.stroke();
             ctx.closePath();
         }

         function erase() {
             var m = confirm("Want to clear");
             if (m) {
                 ctx.clearRect(0, 0, w, h);
                 document.getElementById("canvasimg").style.display = 
           "none";
             }
         }

         function save() {
             document.getElementById("canvasimg").style.border = "2px solid";
             var dataURL = canvas.toDataURL();
             document.getElementById("canvasimg").src = dataURL;
             document.getElementById("canvasimg").style.display = "inline";
         }

         function findxy(res, e) {
             if (res == 'down') {
                 prevX = currX;
                 prevY = currY;
                 currX = e.clientX - canvas.offsetLeft;
                 currY = e.clientY - canvas.offsetTop;

                 flag = true;
                 dot_flag = true;
                 if (dot_flag) {
                     ctx.beginPath();
                     ctx.fillStyle = x;
                     ctx.fillRect(currX, currY, 2, 2);
                     ctx.closePath();
                     dot_flag = false;
                 }
             }
             if (res == 'up' || res == "out") {
                 flag = false;
             }
             if (res == 'move') {
                 if (flag) {
                     prevX = currX;
                     prevY = currY;
                     currX = e.clientX - canvas.offsetLeft;
                     currY = e.clientY - canvas.offsetTop;
                     draw();
                 }
             }
         }
</script>
    <div class="content-wrapper"  onmousemove="init()" style="width: 50%; 
float: left;">

       <canvas id="can" width="400" height="200" style="border:2px solid;">
   </canvas>
 </div>

当我向下滚动网页时，它没有准确地绘制在鼠标点处。也就是说，它会绘制一些东西，但如果我向下滚动网页，则不会在鼠标点处绘制一些东西。我想避免这种情况，即使我向下滚动，它也应该在鼠标点处绘制。有人能弄清楚问题出在哪里吗？

Answer 1

您应该使用offsetX和 offsetY MouseEvent 的属性，而不是分别 e.clientX - canvas.offsetLeft 和 e.clientY - canvas.offsetTop ，即使网页滚动后也能准确地在鼠标点处绘制线条。

var canvas, ctx, flag = false,
   prevX = 0,
   currX = 0,
   prevY = 0,
   currY = 0,
   dot_flag = false;

var x = "black",
   y = 2;

function init() {
   canvas = document.getElementById('can');
   ctx = canvas.getContext("2d");
   w = canvas.width;
   h = canvas.height;

   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);
}

function color(obj) {
   switch (obj.id) {
      case "green":
         x = "green";
         break;
      case "blue":
         x = "blue";
         break;
      case "red":
         x = "red";
         break;
      case "yellow":
         x = "yellow";
         break;
      case "orange":
         x = "orange";
         break;
      case "black":
         x = "black";
         break;
      case "white":
         x = "white";
         break;
   }
   if (x == "white") y = 14;
   else y = 2;

}

function draw() {
   ctx.beginPath();
   ctx.moveTo(prevX, prevY);
   ctx.lineTo(currX, currY);
   ctx.strokeStyle = x;
   ctx.lineWidth = y;
   ctx.stroke();
   ctx.closePath();
}

function erase() {
   var m = confirm("Want to clear");
   if (m) {
      ctx.clearRect(0, 0, w, h);
      document.getElementById("canvasimg").style.display =
         "none";
   }
}

function save() {
   document.getElementById("canvasimg").style.border = "2px solid";
   var dataURL = canvas.toDataURL();
   document.getElementById("canvasimg").src = dataURL;
   document.getElementById("canvasimg").style.display = "inline";
}

function findxy(res, e) {
   if (res == 'down') {
      prevX = currX;
      prevY = currY;
      currX = e.offsetX;
      currY = e.offsetY;

      flag = true;
      dot_flag = true;
      if (dot_flag) {
         ctx.beginPath();
         ctx.fillStyle = x;
         ctx.fillRect(currX, currY, 2, 2);
         ctx.closePath();
         dot_flag = false;
      }
   }
   if (res == 'up' || res == "out") {
      flag = false;
   }
   if (res == 'move') {
      if (flag) {
         prevX = currX;
         prevY = currY;
         currX = e.offsetX;
         currY = e.offsetY;
         draw();
      }
   }
}

<div class="content-wrapper" onmousemove="init()" style="width: 50%; 
float: left;">
   <canvas id="can" width="400" height="500" style="border:2px solid;"></canvas>
</div>