使用画布线定位正文元素

Question

>我有一个带有图像的画布。当用户双击它时，我会在画布上添加一条水平线，并在该线的前面添加一个X标记。此X标记位于画布外部。然而，不知何故，这个X标记的TOP位置没有与水平线正确对齐，它偏离了几个像素

(请在整页模式下运行演示以查看问题(

$(function(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var rect = {};  
var img = new Image();
img.src = 'https://i.ndtvimg.com/i/2016-10/spud-boxer-best-dressed-dog_650x400_41476182056.jpg';
img.addEventListener('load', function() {
	canvas.width = img.naturalWidth;
	canvas.height = img.naturalHeight;
	ctx.drawImage(img, 0, 0);
	}, false);
$("#canvas").dblclick(function (e) {
var mousePos = getMousePos(canvas, e);
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#df4b26';
ctx.moveTo(0, mousePos.y);
ctx.lineTo(canvas.width, mousePos.y);
ctx.closePath();
ctx.stroke();

var top = e.clientY;
var left = canvas.width + mousePos.rectLeft + 5; 
$("body").append($("<span>x</span>").css({ top: top, left: left, position: 'absolute' }));
});
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: Math.floor(evt.clientX - rect.left),
y: Math.floor(evt.clientY - rect.top),
rectLeft: rect.left,
rectTop: rect.top
};
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas" style="max-width: 100%;"></canvas>

Answer 1

它对齐得很好，但由于font-size和line-height，内容区域(x所属的地方(将对齐而不是x。

您可以添加line-height:0来解决此问题：

$(function(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var rect = {};  
var img = new Image();
img.src = 'https://i.ndtvimg.com/i/2016-10/spud-boxer-best-dressed-dog_650x400_41476182056.jpg';
img.addEventListener('load', function() {
	canvas.width = img.naturalWidth;
	canvas.height = img.naturalHeight;
	ctx.drawImage(img, 0, 0);
	}, false);
$("#canvas").dblclick(function (e) {
var mousePos = getMousePos(canvas, e);
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#df4b26';
ctx.moveTo(0, mousePos.y);
ctx.lineTo(canvas.width, mousePos.y);
ctx.closePath();
ctx.stroke();

var top = e.clientY;
var left = canvas.width + mousePos.rectLeft + 5; 
$("body").append($("<span class='fix'>x</span>").css({ top: top, left: left, position: 'absolute' }));
});
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: Math.floor(evt.clientX - rect.left),
y: Math.floor(evt.clientY - rect.top),
rectLeft: rect.left,
rectTop: rect.top
};
}
})

.fix {
line-height:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas" style="max-width: 100%;"></canvas>