0

javascript 似乎没有创建错误的圆圈，if 语句中的 else 回显。我是否以错误的顺序编写了javascript？我知道它不是 php，因为正确的 div 显示在源代码中。

    </style>
    <script>
      window.onload = function() {
        //uetr circle
        var canvas = document.getElementById("Canvas");
        var context = canvas.getContext("2d");
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 70;
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#00FF7F";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();

        //false circle
        var canvas = document.getElementById("Canvas1");
        var context = canvas.getContext("2d");
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 70;
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#B0171F";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
      };

    </script>
  </head>
    <body>
        <?php

        $visible = true;

        if($visible){
            echo "<div id='unhidden'><canvas id='Canvas' width='578' height='200'></canvas></div>";
        }
        else{
            echo "<div id='hidden'><canvas id='Canvas1' width='578' height='200'></canvas></div>";
        }
        ?>
    </body> 
</html>
4

1 回答 1

3

你只回显一个canvas标签。您的脚本尝试绘制两个元素。一旦遇到不存在的元素，它就会中断 - 检查您的错误控制台。如果你呼应“真”圆圈，它会在绘制第一个圆圈后中断 - 如果你呼应“假”圆圈，它会在绘制任何内容之前中断。

canvas !== null根据可见性检查，或者更好地只执行一个函数：

<script type="text/javascript">
window.onload = function() {
    function drawCircle(canvasid, color) {
        var canvas = document.getElementById(canvasid);
        if (!canvas) // check for null
           return;
        var context = canvas.getContext("2d");
        var centerX = canvas.width / 2,
            centerY = canvas.height / 2;
        var radius = 70;
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = color;
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    }

    <?php
if (true)
    echo "    drawCircle('canvas', '#00FF7F');";
else
    echo "    drawCircle('canvas', '#B0171F');";
?>
}; // end onload function
</script>

<body>
    <?php
    if (true){
        echo "<div id='unhidden'>";
    else
        echo "<div id='hidden'>";
   ?>
   <canvas id='canvas' width='578' height='200'></canvas>
   </div>
</body>
于 2012-09-11T19:20:24.420 回答