캔버스가있는 2 열 그리드

Question

개체를 기반으로 2 열 그리드를 만들려고합니다. 결국 직사각형에 텍스트를 넣고 싶습니다. 내가 생각 해낸 것을 보여 드리겠습니다. 주된 문제점은 두 번째 열의 위치가 균등하지 않다는 것입니다. 여백이 제대로 표시되지 않습니다.

$(function(){ 
 

 
var questions = { 
 
    \t question1 : ["This is a question for statement 1 This is a question for statement 1", 7], 
 
    \t question2 : ["This is a question for statement 2 This is a question for statement 2", 3], 
 
    \t question3 : ["This is a question for statement 3 This is a question for statement 3", 8], 
 
    \t question4 : ["This is a question for statement 4 This is a question for statement 4", 8], 
 
    \t question5 : ["This is a question for statement 5 This is a question for statement 5", 8], 
 
    \t question6 : ["This is a question for statement 6 This is a question for statement 6", 8], 
 
    \t question7 : ["This is a question for statement 7 This is a question for statement 7", 8], 
 
    \t question8 : ["This is a question for statement 8 This is a question for statement 8", 8] 
 
    
 
    } 
 
    var canvas = $("canvas")[0]; 
 
    var ctx = canvas.getContext("2d"); 
 
\t 
 
\t var count0 = 0; 
 
\t var count1 = 1; 
 
    for(var question in questions){ 
 
    \t var i = Object.keys(questions).indexOf(question); 
 
    \t var a = i - 1; 
 
    \t 
 
    \t ctx.fillStyle = "green"; 
 
    \t if(i % 2 == 0 && i == 0){ 
 
    \t \t ctx.fillRect(0, (i * 1) * 200, 200, 200) 
 
    \t }else if(i % 2 == 0 && i !== 0){ 
 
    \t \t count0++ 
 
    \t // \t console.log("count", count0) 
 
    \t \t ctx.fillRect(0, (i * 1) * 210 - (200 *count0), 200, 200) 
 
    \t }else if(i % 2 == 1 && i == 1){ 
 
    \t \t ctx.fillRect(210, 0 * 200, 200, 200) 
 
    \t } 
 

 
    \t else if(i % 2 == 1 && i !== 1){ 
 
    \t \t count1++ 
 
    \t // \t console.log("count", count1) 
 
    \t \t ctx.fillRect(210, (i * 1) * 207 - (200 *count1), 200, 200) 
 
    \t \t // ctx.fillRect(210,()) 
 
    \t } 
 
\t \t  \t 
 
\t \t  \t 
 
\t } 
 

 

 
\t \t })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<canvas id "myCanvas" width = "700px" height = "1000px"></canvas>

Answer 1

나는 다른 하나 개의 칼럼 (207)에 210을 곱하는 것은이라고 추측 것이지만 정확하게 (코드로 잘못 뭐가 어떻게 돌아가는지 파악하기 위해 인내심을 가지고 있지 않습니다

$(function() { 
 
    var questions = { 
 
    question1: ["This is a question for statement 1 This is a question for statement 1", 7], 
 
    question2: ["This is a question for statement 2 This is a question for statement 2", 3], 
 
    question3: ["This is a question for statement 3 This is a question for statement 3", 8], 
 
    question4: ["This is a question for statement 4 This is a question for statement 4", 8], 
 
    question5: ["This is a question for statement 5 This is a question for statement 5", 8], 
 
    question6: ["This is a question for statement 6 This is a question for statement 6", 8], 
 
    question7: ["This is a question for statement 7 This is a question for statement 7", 8], 
 
    question8: ["This is a question for statement 8 This is a question for statement 8", 8] 
 
    } 
 
    var canvas = $("canvas")[0]; 
 
    var ctx = canvas.getContext("2d"); 
 
    ctx.font = "20px serif"; 
 
    
 
    Object.keys(questions).forEach(function(question, i) { 
 
    var offset = i % 2; 
 
    ctx.fillStyle = "green"; 
 
    ctx.fillRect(210 * offset, (i - offset)/2 * 210, 200, 200); 
 
    // next two lines optional: 
 
    ctx.fillStyle = "white"; 
 
    ctx.fillText(question, 210 * offset + 30, (i - offset)/2 * 210 + 60); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<canvas id "myCanvas" width="700px" height="1000px"></canvas>

: 문제의 큰 부분은), 당신이 훨씬 간단 코드로 원하는 결과를 얻을 수 있다는 것을 나에게 것 때문에