Может быть, это глупый вопрос, но я не могу понять, что происходит. Я изучаю цифровое рисование с помощью HTML CANVAS и хочу рисовать в нескольких CANVAS (одновременно) с одним и тем же выводом движения мыши. Я сделал функцию для обработки контекста (ctx) каждого CANVAS при рисовании (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" width="200" height="200" ></canvas>
<canvas id="canvas2" width="200" height="200" ></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>