如何给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/archive/2011/11/08/2241245.html