HTML 5 Canvas文本循環

Question

我目前正在嘗試在條形圖上覆蓋一些文本。 在我的JavaScript中，我有一個循環運行13次以在圖形上繪制13條。 它工作正常，但是當我添加線時。 我做了一個簡單的測試，就可以繪制文本了，但是由於某種原因，我無法在循環中繪制文本，而且我也不明白為什么。

//Draw bars
    var i;
    barLeft = 75;
    for (i = 1; i <= 13; i++)
    {
        bar = eval("ctx" + [i]);
        barHeight = eval("ht" + [i]);
        bar = c.getContext("2d");
        bar.fillStyle = "#3366cc";
        bar.fillRect(barLeft + barWidth + barSpacing, graphHeight - barHeight, 50, barHeight);
        bar.fillText(barHeight, barLeft, barHeight)
        barLeft = barLeft + 53;
    }      

Answer 1

這是代碼的重構，以反映這些更改：

• 您只需要1個引用上下文即可，而不是13。
• eval是邪惡的！ 而是從數組獲取值。
• 調整繪制文本的位置（y == graphHeight-barHeight-5）

 var canvas=document.getElementById("canvas"); var bar=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var cities=['Wilcox','Cobb','Bartow','Cook']; var graphHeight=250; var barWidth=20; var barSpacing=10; var heights=[]; for(var i=0;i<cities.length;i++){ heights.push(parseInt(Math.random()*50)+25); } var i; var barLeft = 35; for (i=0; i<cities.length; i++) { barHeight = heights[i]; bar.fillStyle = "#3366cc"; bar.fillRect(barLeft+barWidth+barSpacing, graphHeight-barHeight, 50, barHeight); bar.font='18px verdana'; bar.fillText(barHeight, barLeft+barWidth+barSpacing+5, graphHeight-barHeight-5); bar.font='10px verdana'; bar.fillStyle='black'; bar.fillText(cities[i], barLeft+barWidth+barSpacing+5, graphHeight+15); barLeft = barLeft + 53; } 

 body{ background-color: white; padding:20px;} canvas{border:1px solid red;} 

 <canvas id="canvas" width=300 height=300></canvas>