2 Spalte Gitter mit Leinwand

Question

Ich versuche nur, ein 2-Spalten-Gitter basierend auf einem Objekt zu machen. Ich möchte den Text schließlich in die Rechtecke einfügen. Ich werde dir zeigen, was ich mir ausgedacht habe. Das Hauptproblem ist, dass die Positionen in der zweiten Spalte nicht gleichmäßig verteilt sind. Die Ränder sehen nicht richtig aus.

$(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

Ich habe nicht die Geduld, um herauszufinden, was genau falsch mit Ihrem Code wird (obwohl ich, dass von 210 in einer Spalte und 207 in der anderen eine Multiplikation würde vermuten, ist großer Teil des Problems), weil es mir scheint, dass Sie das gewünschte Ergebnis mit vielen einfachen Code zu bekommen:

$(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>