Javascript:我的工具提示不显示其边框

Question

出于学习的原因，我想实现一个工具提示，它在我的页面的某个元素内跟随我的光标。对于这个练习，我想使用纯 Javascript 来完成这个任务。 Canvas 应在带边框的矩形中显示当前光标位置。有人能发现错误吗？

我的页面是这样的:

在头部我有 CSS 声明

<style>
  #tt  {
   border: 10px green;
   position: absolute;
   left: -100px; /* initially invisible */
   top: 0;
  }
</style>

在 HTML 正文中，我这样定义了工具提示:

<canvas id="tt" width="80" height="15"></canvas>
<br>
<div id="area">
  <!-- This is the area where I display my tooltip -->
</div>

现在是 JavaScript 部分:

我正在捕获“mousemove”事件，

document.getElementById("area").addEventListener("mousemove",mouseMove,false);

具有以下全局定义:

hcan=document.getElementById("tt");
hctx=hcan.getContext('2d');

并使用以下代码编写工具提示:

var hx=e.clientX;
var hy=e.clientY;
hcan.style.left=hx+"px";
hcan.style.top=hy+"px";
hctx.clearRect(0,0,80,15);
hctx.fillStyle="red";
hctx.fillText(hx+'/'+hy,0,10);

我可以看到鼠标光标后的工具提示文本，但看不到工具提示的边框，这是我在声明中定义的。

当我调用 clearRect 时，是否隐式删除了边框？但这应该只清除 Canvas 的内部部分，而不是边框​​，我认为这只是装饰。

Answer 1

尝试添加边框样式，否则您将定义 10px green none

border: 10px solid green;

应该这样做。