首先，我感谢网站和在我的 html5 和 javascript 查询中提供了很多帮助的成员。让我进入我的问题。在我使用 Canvas 和 javascript 创建的柱形图中。我必须包括一个工具提示。我开发了一个工具提示，我为其提供了下面的代码和图像。问题是工具提示没有重新绘制，而是一次又一次地绘制。
<!doctype html>
<html>
<head>
<script type="text/javascript">
window.onload=function() {
var canvas=document.getElementById('mycanvas');
var ctx=canvas.getContext('2d');
var graphInfo=[{data:[120,130,140,160,180,100],color:'purple',label:["a","b","c","d","e","f"]},{data:[100,120,130,140,150,190],color:'green',label:["g","h","i","j","k","l"]}];
var width=45;
function renderGrid(gridPixelSize, color)
{
ctx.save();
ctx.lineWidth = 0.5;
ctx.strokeStyle = color;
for(var i = 20; i <= canvas.height-20; i = i + gridPixelSize)
{
ctx.beginPath();
ctx.moveTo(20, i);
ctx.lineTo(canvas.width-20, i);
ctx.closePath();
ctx.stroke();
}
for(var j = 20; j <= canvas.width-20; j = j + gridPixelSize)
{
ctx.beginPath();
ctx.moveTo(j, 20);
ctx.lineTo(j, canvas.height-20);
ctx.closePath();
ctx.stroke();
}
ctx.restore();
}
renderGrid(10, "grey");
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.moveTo(20, canvas.height-20);
ctx.lineTo(canvas.width-20, canvas.height-20);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.moveTo(20, 20);
ctx.lineTo(20, canvas.height-20);
ctx.closePath();
ctx.stroke();
ctx.font = "bold 16px Arial";
function getFunctionForTimeout(j){
var i=0,currx=30,info=graphInfo[j],x5=j*5;
var fTimeout=function(){
var h=Math.max(info.data[i]-x5,0);
var m=info.label[i];
ctx.fillStyle='black'
ctx.fillRect(currx+(10*x5)+2,canvas.height-h-20,width+2,h-1);
ctx.fillStyle=info.color;
ctx.fillRect(currx+(10*x5),canvas.height-h-21,width,h);
ctx.fillText(m, currx+(10*x5)+20, canvas.height-5);
currx+=120;
i++;
if(i<info.data.length)setTimeout(fTimeout,0);
canvas.addEventListener('mousemove',function onMouseover(e) {
var mx = e.clientX - 8;
var my = e.clientY - 8;
ctx.save();
var str='X : ' + mx + ', ' + 'Y :' + my;
ctx.fillStyle = '#00ff00';
ctx.fillRect(mx + 10, my + 10, 70, 20);
ctx.fillStyle = '#000';
ctx.font = 'bold 20px verdana';
ctx.fillText(str, mx + 10, my + 25, 60);
ctx.restore();
}, 0);
};
return fTimeout;
}
for(var j=graphInfo.length-1;j>=0;j--) {
setTimeout(getFunctionForTimeout(j),2000);
}
};
</script>
</head>
<body>
<canvas id="mycanvas" height="400" width="800" style="border:1px solid #000000;">
</body>
</html>
最佳答案
HTML5 Canvas 与 SVG 或 HTML 不同:您不能只添加和删除元素，或更改它们的属性，然后期望为您重新绘制内容。当你在 Canvas 上画东西时，它是永久的。要“移动”某些内容，您必须删除 Canvas (clearRect())，然后在新位置使用工具提示再次绘制内容。
或者，我建议不要将 Canvas 用作工具提示。你为什么会？相反，将工具提示创建为单独的 HTML(或 SVG)元素并四处移动。让浏览器负责为您重新绘制合成。
关于javascript - 我在 Canvas 中的自定义工具提示必须显示一次而不是循环显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11687462/