鼠标指针坐标和画布坐标不匹配

Question

我正在尝试使用画布绘制一条线。在绘制线条时，我的鼠标指针坐标和画布坐标不匹配。如果我将鼠标拖动到画布顶部，则会在底部绘制一条线。任何人都可以在这里确定我做错了什么。我尝试了下面的例子。

小提琴：https://jsfiddle.net/Shathiran/bpunb9dn/5/

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('drawCanvas');
	        ctx = canvas.getContext("2d");
	        w = ctx.clientWidth;
	        h = ctx.clientHeight;
          
	        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 draw() {
	        ctx.beginPath();
	        ctx.moveTo(prevX, prevY);
	        ctx.lineTo(currX, currY);
	        ctx.strokeStyle = x;
	        ctx.lineWidth = y;
	        ctx.stroke();
	        ctx.closePath();
	    }
	    
	    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();
	            }
	        }
	    }
	    init();

<div class="paper">
    <canvas id="drawCanvas" style="width:100%; height:100%;border: 1px solid #000">     </canvas>
</div>

Answer 1

你的鼠标位置很好。这里的问题是如何分配画布的char * c和width，主要是因为您通过CSS将其设置为样式（“拉伸”画布）除{{1}之外的其他样式}和height属性（有关详细信息，请参阅this question）。要解决此问题，请将width HTML属性设置为画布。

例如：

height

width/height

注意您可以使用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('drawCanvas'); canvas.setAttribute('width', canvas.parentNode.offsetWidth); canvas.setAttribute('height', canvas.parentNode.offsetHeight); ctx = canvas.getContext("2d"); w = ctx.clientWidth; h = ctx.clientHeight; 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 draw() { ctx.beginPath(); ctx.moveTo(prevX, prevY); ctx.lineTo(currX, currY); ctx.strokeStyle = x; ctx.lineWidth = y; ctx.stroke(); ctx.closePath(); } function findxy(res, e) { if (res == 'down') { prevX = currX; prevY = currY; var cRect = canvas.getBoundingClientRect(); currX = e.clientX - cRect.offsetLeft; currY = e.clientY - cRect.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(); } } } init();和<div class="paper" width="400"> <canvas id="drawCanvas" width="200" height="200" style="border: 1px solid #000"> </canvas> </div>将画布高度和宽度设置为100％。虽然如果你想要它进行dyncamically更改，你需要在resize上更新它：

window.innerWidth