如何给canvas中绘制的图标加标签

实验室的任务:为canvas中的图标加标签

我最先想到的是直接用html5的fillText方法,但是一直纠结于如何把这个文字清除掉,花了大概一个下午的时间都没有找到很好的解决办法。其中看到一个比较有意思的是做两个重合的canvas,上面的那个透明,每次重绘上面的那个canvas就解决了,自己想到的办法是记下这个text的位置,然后用清除clearRect()的方法来清除,但是比较悲剧的是这个label不是定长的。其实用土办法就很容易解决了,用一个空的div,然后绝对定位,就轻松实现了。看来做事情一定还是要从自己熟悉的东西开始发挥,要不会花费很多时间纠结。

		//label绘制,上方标签
	    canvas.addEventListener('mousemove', function(e) {
			for(var i=0;i<locDevice.length;i++){
				if(locDevice[i].pointIn(e.layerX, e.layerY))
					{
				     var text = locName[i];
					 $('#tips span').text(text);
					 $('#tips').css('left',e.pageX+10);
					 $('#tips').css('top',e.pageY+10);
					 $('#tips').show();
					}
				}
		}, false);
		canvas.addEventListener('mouseout', function(e) {
					 $('#tips').hide();
		}, false);
		//绘制完成

  

原文地址:https://www.cnblogs.com/qiyueshihuang/p/2241245.html