HTML 5 Текст холста в цикле

В настоящее время я пытаюсь наложить некоторый текст на гистограмме. В моем JavaScript у меня есть цикл, который выполняется 13 раз, чтобы построить 13 баров на графике. он отлично работает, но когда я добавляю строку .... bar.fillText (barHeight, barLeft, barHeight) ... он прерывает цикл и останавливает рисование. Я сделал простой тест, и я умею рисовать текст в порядке, но по какой-то причине я не могу рисовать текст в своем цикле, и я не понимаю, почему.HTML 5 Текст холста в цикле

//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; 
    }

источник

2014-10-13 Drew

Было бы легче для нас, чтобы помочь вам, если вы отправите код как [фрагмент стека] (http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) или [jsfiddle] (http://jsfiddle.com). –

Как сторона примечания. Какова цель использования 'eval' в вашем коде? –

Вот рефакторинга кода, чтобы отразить эти изменения:

Вам просто нужно 1 ссылку на контекст вместо 13.
eval это зло! Получите ваши значения из массива.
Adjust где вы рисуете текст (у == graphHeight-barHeight-5)

enter image description here

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>

источник

2014-10-13 23:22:06 markE

HTML 5 Текст холста в цикле

ответ

Смежные вопросы