我只是想基于一个对象制作一个2列网格。我想最终将文本放在矩形中。我将向您展示我的想法。主要问题是第二列中的位置位置不均匀。
边距看起来不正确。



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

最佳答案

我没有耐心去弄清楚您的代码到底出了什么问题(尽管我猜想,一列乘以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>

关于javascript - 带 Canvas 的2列网格,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39262307/

10-11 11:49