Javascript HTML5画布图像工具提示

所以，我一直在尝试在这个黄色圆圈上绘制图像（标记）。我尝试在画布圆圈内的图像上显示随机点/标记。我想像这样显示工具提示：

这是我的代码：

函数randomIntFromInterval（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1）+min）；
}
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
//创建圆
ctx.beginPath（）；
ctx.arc（190，190，190，0，2*Math.PI）；
//圆形背景色
ctx.fillStyle='rgba（255238,48,0.11）'；
ctx.fill（）；
//圆边
ctx.lineWidth=1；
ctx.strokeStyle='#FFC500'；
ctx.stroke（）；
ctx.closePath（）；
变量xCor，yCor，p1，p2，pcolor，posY=100，
txtwidth，txtLoc=“你好世界”；
函数getXY（）{//获取x/y随机坐标
xCor=randomIntFromInterval（50300）；
yCor=随机点间隔（50，300）；
}
函数drawTextBG（ctx、txtLoc、font、x、y）{
ctx.save（）；
ctx.font=font；
ctx.textb基线='top'；
ctx.fillStyle='#fff'；
变量宽度=ctx.measureText（txtLoc）.width；
fillRect（x，y，width，parseInt（字体，10））；
ctx.fillStyle='#000'；
ctx.fillText（txtLoc，x，y）；
ctx.restore（）；
}
功能图线（p1、p2、pcolor）{
ctx.beginPath（）；
ctx移动到（p1+10，p2）；
ctx.lineTo（100100）；
ctx.strokeStyle=pcolor；
ctx.lineWidth=2；
ctx.stroke（）；
ctx.closePath（）；
控制台日志（p1+“”+p2）；
}
//插入图像地图标记
变量t，标记=新图像（）；
mark.src=”http://icons.iconarchive.com/icons/e-young/gur-project/32/map-pointer-icon.png";
mark.onload=函数（）{
getXY（）；
ctx.drawImage（mark、xCor、yCor）；
drwLine（xCor，yCor，#d93030'）；
//drawTextBG（ctx，txtLoc，'14px arial'，30,30）；
//控制台日志（xCor+''+yCor）；
getXY（）；
ctx.drawImage（mark、xCor、yCor）；
drwLine（xCor，yCor，'d93030'）；
//控制台日志（xCor+''+yCor）；
getXY（）；
ctx.drawImage（mark、xCor、yCor）；
drwLine（xCor，yCor，'d93030'）；
//控制台日志（xCor+''+yCor）；
getXY（）；
ctx.drawImage（mark、xCor、yCor）；
drwLine（xCor，yCor，'d93030'）；
//控制台日志（xCor+''+yCor）；
getXY（）；
ctx.drawImage（mark、xCor、yCor）；
drwLine（xCor，yCor，'d93030'）；
//控制台日志（xCor+''+yCor）；
};

您的浏览器不支持HTML5画布标记。
您可以使用向量数学来查找工具提示的偏移量。您可以执行下面的示例。
//函数
函数randInt（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1）+min）；
}
功能点（x，y）{
返回{“x”：x，“y”：y}；
}
函数向量（p1，p2）{
返回点（p2.x-p1.x，p2.y-p1.y）；
}
函数规格化（v）{
var mag=Math.abs（Math.sqrt（（v.x*v.x）+（v.y*v.y））；
返回点（v.x/mag、v.y/mag）；
}
函数2（p1，p2）{
返回归一化（向量（p1，p2））；
}
功能添加（p1、p2）{
返回点（p1.x+p2.x，p1.y+p2.y）；
}
函数mult（p，x）{
返回点（p.x*x，p.y*x）；
}
功能偏移设定点（p1、p2、偏移）{
返回add（p2，mult（normalize2（p1，p2），offset））；
}
函数randPoint（）{
返回点（randInt（50300），randInt（50300））；
}
//方法
函数绘图工具提示（ctx、原点、p、文本、字体、填充）{
ctx.save（）；
ctx.font=font；
ctx.textb基线='top'；
ctx.fillStyle='#FF0'；
var v=偏离设定点（原点，p，32）；
var textMetrics=ctx.measureText（文本）；
var textWidth=textMetrics.width；
var textHeight=parseInt（字体，10）；
var x1=v.x-填充，x2=文本宽度+填充*2；
变量y1=v.y-填充，y2=文本高度+填充*2；
抽绳（ctx，点（p.x+10，p.y），点（x1，y1））；
ctx.fillRect（x1，y1，x2，y2）；
ctx.rect（x1，y1，x2，y2）；
ctx.lineWidth=1；
ctx.stroke（）；
ctx.fillStyle='#000'；
ctx.fillText（text，v.x，v.y）；
ctx.restore（）；
}
功能抽绳（ctx、p1、p2、pcolor）{
ctx.beginPath（）；
ctx.moveTo（p2.x+10，p2.y）；
ctx.lineTo（p1.x，p1.y）；
ctx.strokeStyle=pcolor；
ctx.lineWidth=2；
ctx.stroke（）；
ctx.closePath（）；
console.log（p2.x+''+p2.y）；
}
函数drawImage（ctx、p、mark）{
ctx.drawImage（标记，p.x-标记宽度/4，p.y-标记高度/2）；
}
函数drawRandMarker（toolTipText）{
p=随机点（）；
抽绳（ctx，原点，p'#d93030'）；
图纸图像（ctx、p、标记）；
drawToolTip（ctx，原点，p，toolTipText，'14px arial'，2）；
}
//常数
var MARKER_SRC=”http://icons.iconarchive.com/icons/e-young/gur-project/32/map-pointer-icon.png";
var标记_宽度=32；
var MARKER_HEIGHT=32；
var DEFAULT_TEXT=“Hello World”；
//开始主逻辑
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var原点=点（100100）；
//创建圆
ctx.beginPath（）；
ctx.arc（190，190，190，0，2*Math.PI）；
//圆形背景色
ctx.fillStyle='rgba（255238,48,0.11）'；
ctx.fill（）；
//圆边
ctx.lineWidth=1；
ctx.strokeStyle='#FFC500'；
ctx.stroke（）；
ctx.closePath（）；
//插入图像地图标记
变量t，标记=新图像（）；
mark.src=MARKER\u src；
mark.onload=函数（）{
drawRandMarker（默认文本）；
drawRandMarker（默认文本）；
drawRandMarker（默认文本）；
drawRandMarker（默认文本）；
}
您的浏览器不支持HTML5画布标记。
我认为它缺少代码…但这不是我尝试的，从图像/标记到工具提示的线条原点。@user2633451:稍微清理了代码，并开始从标记到工具提示添加线条。仍然需要一些工作，但至少这是一个开始……如何让“运行代码片段”按钮显示在帖子中？这是本周新增的一项功能。创建或编辑问题或答案时，请单击“图像”按钮旁边的“代码段”按钮。快捷键是
Ctrl
+
M
。这是最新的。