По соображениям обучения я хочу реализовать всплывающую подсказку, которая следует за моим курсором внутри определенного элемента на моей странице. Для этого упражнения я хочу использовать простой Javascript для достижения этой задачи. В холсте должна отображаться текущая позиция курсора в прямоугольнике с рамкой. Может ли кто-нибудь обнаружить ошибку?Javascript: моя подсказка не показывает свою границу
Моя страница выглядит следующим образом:
В голове у меня Декларации 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);
Я могу видеть текст подсказки следующего моего курсора мыши, но я могу» t видеть границу всплывающей подсказки, которую я определил в своей декларации.
Может быть, граница неявно стирается, когда я вызываю clearRect? Но это должно только очистить внутреннюю часть холста, а не границу, которая является просто украшением - я думаю.