0

javascriptは偽の円を作成していないようです。elseはifステートメントにエコーします。JavaScriptを間違った順序で書いていますか？正しいdivがソースコードに表示されるので、phpではないことを私は知っています。

    </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

タグを1つだけエコーしcanvasます。スクリプトは2つの要素をペイントしようとします。存在しない要素に遭遇すると、壊れます-エラーコンソールを確認してください。「真の」円をエコーすると、最初の円をペイントした後に壊れます。「偽の」円をエコーすると、何かをペイントする前に壊れます。

canvas !== null可視性に応じて、を確認するか、1つの関数のみを実行することをお勧めします。

<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 に答える