1
私はオブジェクトに基づいて2列のグリッドを作成しようとしています。私は最終的に矩形の中にテキストを入れたい。私が思いついたことをお見せしましょう。主な問題は、第2列の位置が均等でないことです。 余白が正しく表示されません。キャンバスを使った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>
これはすばらしい解決策です。私はあなたと同じくらい良いことを願っています。 –