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

우리가 경우에 당신을 도울 쉬울 것 당신은 코드를 [stack snippet] (http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) 또는 [jsfiddle] (http://jsfiddle.com). –

메모로. 코드에서'eval'을 사용하는 목적은 무엇입니까? –

여기에 이러한 변경 사항을 반영하기 위해 코드의 리팩토링이다 :

당신은 단지 대신 13
eval의 맥락에 1 참조가 필요 악이다! 배열에서 값을 가져와야합니다. 당신이 당신의 텍스트 그리기있는 곳
는 조정 (Y를 == 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 캔버스 텍스트 루프

답변

관련 문제