javascript - 带 Canvas 的 2 列网格

Question

我只是想根据一个对象制作一个 2 列网格。我想最终将文本放入矩形中。我会告诉你我的想法。主要问题是第二列中的记录 y 位置间隔不均匀。 页边距看起来不正确。

$(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");
	
	var count0 = 0;
	var count1 = 1;
    for(var question in questions){
    	var i = Object.keys(questions).indexOf(question);
    	var a = i - 1;
    	
    	ctx.fillStyle = "green";
    	if( i % 2 == 0 && i  == 0){
    		ctx.fillRect(0, (i * 1) * 200, 200, 200)
    	}else if(i % 2 == 0 && i  !== 0){
    		count0++
    	//	console.log("count", count0)
    		ctx.fillRect(0, (i * 1) * 210 - (200 *count0), 200, 200)
    	}else if(i % 2 == 1 && i  == 1){
    		ctx.fillRect(210, 0 * 200, 200, 200)
    	}

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


		})

<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

我没有耐心弄清楚你的代码到底出了什么问题(尽管我猜想在一列中乘以 210，在另一列中乘以 207 是问题的一个重要部分)，因为看起来对我来说，您可以使用更简单的代码获得所需的结果:

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