Javascript 从其中心显示一个十字

下面的代码允许我单击图像（画布），获得坐标，并在单击完成的地方放置一个十字。十字的问题是，它将从拐角处（右下角）表示，我将在单击和十字之间有一个偏移，它不表示精确的坐标。换句话说，十字的中心应该是坐标的原点

怎么做

var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（“2d”）；
//地图精灵
var mapSprite=新图像（）；
mapSprite.src=“image.png”；
//声明标记精灵
变量标记=函数（）{
this.Sprite=新图像（）；
this.Sprite.src=“cross.png”
这个。宽度=10；
这个。高度=10；
这个.XPos=0；
这1.YPos=0；
}
var Markers=新数组（）；
var mouseClicked=函数（鼠标）{
//获得正确的鼠标坐标
var rect=canvas.getBoundingClientRect（）；
var mouseXPos=Math.round（mouse.x-rect.left）；
var mouseYPos=Math.round（mouse.y-rect.top）；
控制台日志（“添加标记”）；
//将标记放置到更好的位置时移动标记
var marker=新标记（）；
marker.XPos=mouseXPos-（marker.Width/2）；
marker.YPos=mouseYPos-marker.Height；
marker.YPosNew=marker.YPos；
标记器。推（标记器）；
//画笔
context.drawImage（标记[0]。精灵，标记[0]。XPos，标记[0]。YPos，标记[0]。宽度，标记[0]。高度）；
//计算位置文本
var markerText=Markers[0]。XPos+，“+Markers[0]。YPosNew；
//在1s后禁用指针
setTimeout（函数（）{
document.getElementById（'Canvas'）.style.cursor=“不允许”；}，1000）；
}
//将鼠标单击事件侦听器添加到画布
canvas.addEventListener（“mousedown”，mouseClicked，false）；
var main=函数（）{
draw（）；
};
var draw=函数（）{
//透明帆布
context.fillStyle=“#000”；
context.fillRect（0,0，canvas.width，canvas.height）；
//绘制图表
drawImage（mapSprite，0,095467）；
//划十字
交叉=新图像（）；
cross.src=“cross.png”；
}
mapSprite.addEventListener（'load'，main）


改变你的标记的YPO，这就是它上升的原因。在这种情况下，十字将位于单击的中间位置

var marker = new Marker();
marker.XPos = mouseXPos - (marker.Width / 2);
marker.YPos = mouseYPos - (marker.Height / 2);
marker.YPosNew = marker.YPos;
Markers.push(marker);