每当我的if条件为假时，Canvas会变为空白

Question

我遇到了在canvas上显示数据的问题。我有多个if，else if语句，我想评估它们以确定根据用户输入显示哪个文本。

如果我创建单个if语句为真的条件，则应显示的文本为。但是，当我添加其他else if语句或单个if语句的计算结果为false时，canvas将完全为空。以下示例：

if((<?php echo empty($row['civ1']);?>) &&
(<?php echo empty($row['civ2']);?>) &&
(<?php echo empty($row['civ3']);?>) &&
(<?php echo empty($row['civ4']);?>)){

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("", 705, 175);
}

仅当它是唯一评估的条件且条件评估为真时才有效。如果评估为false，则会导致canvas变为空白。

另外，如果我添加额外的else if语句来处理我想要评估的其他情况，canvas始终保持空白....

if((<?php echo empty($row['civ1']);?>) &&
(<?php echo empty($row['civ2']);?>) &&
(<?php echo empty($row['civ3']);?>) &&
(<?php echo empty($row['civ4']);?>)){

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("", 705, 175);
}
else if((<?php echo !empty($row['civ1']);?>) &&
(<?php echo empty($row['civ2']);?>) &&
(<?php echo empty($row['civ3']);?>) &&
(<?php echo empty($row['civ4']);?>)){

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal:  <?php echo ($row['civ1']);?>", 705, 175);
}
else if((<?php echo !empty($row['civ1']);?>)  &&
(<?php echo !empty($row['civ2']);?>)  &&
(<?php echo !empty($row['civ3']);?>)  &&
(<?php echo empty($row['civ4']);?>)){

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ1']);?>", 650, 175);

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ2']);?>", 760, 195);

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ3']);?>", 760, 215);
}

这是否与我在empty中使用php语句的方式有关，还是我错过了其他内容？我在canvas的其他地方使用与此类似的代码，它按预期工作。

[编辑]

这里是我用来评估用户是否有输入值或者是否为空白然后根据这些输入显示我想要显示的文本的全套javascript。

if((<?php echo empty($row['civ1']);?>) &&
(<?php echo empty($row['civ2']);?>) &&
(<?php echo empty($row['civ3']);?>) &&
(<?php echo empty($row['civ4']);?>)){

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("", 705, 175);
}
else if((<?php echo !empty($row['civ1']);?>) &&
(<?php echo empty($row['civ2']);?>) &&
(<?php echo empty($row['civ3']);?>) &&
(<?php echo empty($row['civ4']);?>)){

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal:  <?php echo ($row['civ1']);?>", 705, 175);
}
else if((<?php echo !empty($row['civ1']);?>)  &&
(<?php echo !empty($row['civ2']);?>)  &&
(<?php echo !empty($row['civ3']);?>)  &&
(<?php echo empty($row['civ4']);?>)){

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ1']);?>", 650, 175);

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ2']);?>", 760, 195);

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ3']);?>", 760, 215);
}
else if((<?php echo !empty($row['civ1']);?>)  &&
(<?php echo !empty($row['civ2']);?>)  &&
(<?php echo !empty($row['civ3']);?>)  &&
(<?php echo !empty($row['civ4']);?>)){

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ1']);?>", 650, 175);

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ2']);?>", 760, 195);

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ3']);?>", 760, 215);

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ4']);?>", 760, 235);
}
else if((<?php echo empty($row['civ1']);?>)  &&
(<?php echo !empty($row['civ2']);?>)  &&
(<?php echo !empty($row['civ3']);?>)  &&
(<?php echo !empty($row['civ4']);?>)){

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ2']);?>", 760, 175);

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ3']);?>", 760, 195);

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ4']);?>", 760, 215);
}
else if((<?php echo empty($row['civ1']);?>)  &&
(<?php echo empty($row['civ2']);?>)  &&
(<?php echo !empty($row['civ3']);?>)  &&
(<?php echo !empty($row['civ4']);?>)){

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ3']);?>", 760, 175);

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ4']);?>", 760, 195);
}
else if((<?php echo empty($row['civ1']);?>)  &&
(<?php echo empty($row['civ2']);?>)  &&
(<?php echo empty($row['civ3']);?>)  &&
(<?php echo !empty($row['civ4']);?>)){

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ4']);?>", 760, 175);
}
else if((<?php echo !empty($row['civ1']);?>)  &&
(<?php echo empty($row['civ2']);?>)  &&
(<?php echo !empty($row['civ3']);?>)  &&
(<?php echo !empty($row['civ4']);?>)){

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ1']);?>", 650, 175);

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ3']);?>", 760, 195);

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ4']);?>", 760, 215);
}
else if((<?php echo !empty($row['civ1']);?>)  &&
(<?php echo !empty($row['civ2']);?>)  &&
(<?php echo empty($row['civ3']);?>)  &&
(<?php echo !empty($row['civ4']);?>)){

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ1']);?>", 650, 175);

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ2']);?>", 760, 195);

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ4']);?>", 760, 215);
}
else if((<?php echo !empty($row['civ1']);?>)  &&
(<?php echo empty($row['civ2']);?>)  &&
(<?php echo empty($row['civ3']);?>)  &&
(<?php echo !empty($row['civ4']);?>)){

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ1']);?>", 650, 175);

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ4']);?>", 760, 195);
}
else if((<?php echo empty($row['civ1']);?>)  &&
(<?php echo !empty($row['civ2']);?>)  &&
(<?php echo empty($row['civ3']);?>)  &&
(<?php echo !empty($row['civ4']);?>)){

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ2']);?>", 650, 175);

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ4']);?>", 760, 195);
}
else if(((<?php echo empty($row['civ1']);?>)  &&
(<?php echo !empty($row['civ2']);?>)  &&
(<?php echo !empty($row['civ3']);?>)  &&
(<?php echo empty($row['civ4']);?>)){

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ2']);?>", 650, 175);

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ3']);?>", 760, 195);
}
else if((<?php echo empty($row['civ1']);?>)  &&
(<?php echo empty($row['civ2']);?>)  &&
(<?php echo !empty($row['civ3']);?>)  &&
(<?php echo !empty($row['civ4']);?>)){

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ3']);?>", 760, 175);

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ4']);?>", 760, 195);
}
else if((<?php echo empty($row['civ1']);?>)  &&
(<?php echo empty($row['civ2']);?>)  &&
(<?php echo !empty($row['civ3']);?>)  &&
(<?php echo empty($row['civ4']);?>)){

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ3']);?>", 760, 175);
} 
else if((<?php echo empty($row['civ1']);?>)  &&
(<?php echo !empty($row['civ2']);?>)  &&
(<?php echo empty($row['civ3']);?>)  &&
(<?php echo empty($row['civ4']);?>)){

ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ2']);?>", 760, 175);

}

Answer 1

这段代码很丑陋......丑陋。这是一个使其更好的解决方案，并使用json以正确的方式处理上下文的更改。调试也更好。

var rowObj = <?=json_encode($row);?>;
// the following settings are the same for all conditions:
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
if(!rowObj.civ1 && !rowObj.civ2 && !rowObj.civ3 && !rowObj.civ4){
  ctx2.fillText("", 705, 175);
} else if(rowObj.civ1 && !rowObj.civ2 && !rowObj.civ3 && !rowObj.civ4){
  ctx2.fillText("Civilian Goal: "+rowObj.civ1, 705, 175);
} else if(rowObj.civ1 && rowObj.civ2 && rowObj.civ3 && !rowObj.civ4){
  ctx2.fillText("Civilian Goal: "+rowObj.civ1, 650, 175);
  ctx2.fillText(rowObj.civ2, 760, 195);
  ctx2.fillText(rowObj.civ3, 760, 215);
} else {
  alert('None of the conditions are met!');
}