我只是想基于一个对象制作一个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/