使用相同的鼠标输出（同时）在多个 HTML CANVAS 中绘制

Posted 2023-03-25

【中文标题】使用相同的鼠标输出（同时）在多个 HTML CANVAS 中绘制

【英文标题】：Draw in several HTML CANVAS (at the same time) with the same mouse output

【发布时间】：2019-10-31 13:01:18

【问题描述】：

也许这是一个愚蠢的问题，但我无法弄清楚发生了什么。我正在研究使用 html CANVAS 进行数字绘图，我想在多个 CANVAS 中（同时）使用相同的鼠标移动输出进行绘图。我制作了一个函数来处理每个 CANVAS 绘制时的上下文 (ctx) (ctx, xpos, ypos, bool)。但每次我尝试使用它时，它只会吸引其中一个。 我在这里做了一个例子 https://jsfiddle.net/rboyart/Lgzwry02/1/ （如果你点击并在空白处移动，它应该在两个 CANVAS 中绘制）

    <style>
    html, body height: 100%
    .full-height height: 100%

    canvas background-color:#ddd; z-index:-1; float: left; margin-right:10px
    .objectBox z-index: 0; position: relative; top:0; left:0 
    </style>

    <canvas id="canvas1"   ></canvas>
    <canvas id="canvas2"   ></canvas>
    <div id="objectBox" class="full-height" style="width:100%; height:100%; background-color:transparent;">
            </div>

<script type="text/javascript"> var canvas1 = document.getElementById('canvas1'); var ctxPaint = canvas1.getContext('2d'); var canvas2 = document.getElementById('canvas2'); var ctxPaint2 = canvas2.getContext('2d'); var isDrawing, lastPoint; function drawing(ctx, xpos, ypos, bool)  if(!bool) lastPoint =  x: xpos, y: ypos   if(bool)  ctx.lineJoin = "round"; ctx.lineCap = "butt"; ctx.strokeStyle = "#000000"; ctx.globalAlpha = "1"; ctx.globalCompositeOperation = "source-over"; if(ctx.lineWidth >= 5)  ctx.lineWidth -= 0.1;  var currentPoint =  x: xpos, y: ypos ; ctx.beginPath(); ctx.moveTo(lastPoint.x, lastPoint.y); ctx.lineTo(currentPoint.x, currentPoint.y); ctx.closePath(); ctx.stroke(); lastPoint = currentPoint;   /*END FUNCTION DRAWING */ function findObjectCoords(mouseEvent)  var obj = document.getElementById("objectBox"); var widthOBJ = obj.clientWidth; var heightOBJ = obj.clientHeight; var obj_left = 0; var obj_top = 0; var xpos; var ypos; while (obj.offsetParent)  obj_left += obj.offsetLeft; obj_top += obj.offsetTop; obj = obj.offsetParent;  obj.onmousedown = function(e)  isDrawing = true; ; obj.onmouseup = function()  isDrawing = false; ; if (mouseEvent)  xpos = mouseEvent.pageX; ypos = mouseEvent.pageY;  else  xpos = window.event.x + document.body.scrollLeft - 2; ypos = window.event.y + document.body.scrollTop - 2;  xpos -= obj_left; ypos -= obj_top; var numX = map_range(xpos, 0, widthOBJ, 0, 200); var numY = map_range(ypos,0, heightOBJ, 0, 200);  drawing(ctxPaint, parseInt(numX), parseInt(numY), isDrawing); drawing(ctxPaint2, parseInt(numX), parseInt(numY), isDrawing);  document.getElementById("objectBox").onmousemove = findObjectCoords; function map_range(value, low1, high1, low2, high2)  return low2 + (high2 - low2) * (value - low1) / (high1 - low1);  </script>

【参考方案1】：

这是因为您在两个画布上都使用了 lastPoint 变量。当您第一次调用drawing 时，lastpoint 将被覆盖。因此，对于第二次调用 drawing，您的 lastPoint 已经是当前点 => 没有绘制点。

要解决此问题，您可以使用 2 个单独的 lastPoint 变量或仅在第二次调用 drawing 时更新 lastPoint，就像我在这里所做的那样：https://jsfiddle.net/ay45sx19/