0

PHPテーブルの値を使用してHTMLキャンバスに描画しようとしています。私のテストから、phpはテーブルから値を正しく読み取り、javascript関数も呼び出していますが、異なるx値で一連の20*20の長方形を描画することはできません。

<html>
    <script type="text/javascript">
    function draw( i ) {

    alert(i);


    var canvas = document.getElementById('mycanvas');
    var drawshape = canvas.getContext('2d');
    canvas.width = 800;
    canvas.height = 400;
    drawshape.fillStyle = '#00ff00';
    drawshape.fillRect(50 * i , 50, 20, 20);
  }


</script>
    <body>
        <canvas id="mycanvas"></canvas>
    </body>
</html>


<?php


    $query4 = 'SELECT * FROM graph_table';
    $result4 = mysql_query($query4);

    while($person4 = mysql_fetch_array($result4)) {
        $indent =  $person4['indent'];
        echo '<script type="text/javascript">    draw( <?php echo $indent; ?> );         </script>';
    }

?>
4

4 に答える 4

0

test()関数を使用しているときになぜ関数を呼び出すのか疑問に思いますdraw()。また、タイプミスだけの場合はdraw( <?php echo $indent ?> )、javascript関数を使用して呼び出し、次のように変更します。

function draw( i ) {
    var canvas = document.getElementById('mycanvas');
    var drawshape = canvas.getContext('2d');
    canvas.width = 800;
    canvas.height = 400;
    drawshape.fillStyle = #00ff00;
    drawshape.fillRect(50 * i , 50, 20, 20);
  }
于 2012-10-11T09:57:15.840 に答える
0

あなたは次のような関数への呼び出しをエコーし​​ていますtest：

echo '<script type="text/javascript">    test();      </script>';

しかし、あなたは関数を定義したdrawので、これはそれを修正するはずです：

echo '<script type="text/javascript">    draw();      </script>';

ちなみに：使用しないでくださいmysql_*。拡張機能は最終的に非推奨プロセスを開始しました。PDOまたはmysqli_*代わりに切り替えます。いずれかのドキュメントページをチェックして、ここに記載されている代替案のいずれかで対応するものを見つけてください。

それとは別に、スニペットにはHTML5 doctype（<!DOCTYPE html>）もcanvas要素も含まれていません<canvas id='mycanvas'>。これも問題になる可能性があります。しかし、私はあなたがあまりにも多くのコードを投稿することを避けるためにそれらのビットを省略したと思います...

于 2012-10-11T09:58:46.197 に答える
0

問題は$indent、ループに設定される前の値でjavascript関数を出力しているという事実によるものです。ループを実行しているときは、変数を割り当てています$indentが、すでに出力されているjavascript関数には影響しません。より良いアプローチは、次のことを行うことです。

<html>
<script type="text/javascript">
    function draw(indent) {
        var canvas = document.getElementById('mycanvas');
        var drawshape = canvas.getContext('2d');
        canvas.width = 800;
        canvas.height = 400;

        drawshape.fillStyle = #00ff00;
        drawshape.fillRect(50 * indent , 50, 20, 20);
    }
</script>
</html>

<?php
    echo '<script type="text/javascript">';

    $query = 'SELECT * FROM table';
    $result = mysql_query($query);

    while($value = mysql_fetch_array($result)) {
        $indent =  $value['indent'];
        echo "draw($indent);";
    }

    echo '</script>'

?>

このようにして、毎回インデントの新しい値を関数に渡します

于 2012-10-11T09:58:52.127 に答える
0

描画機能を変更する

dbからの結果が生成されるたびにパラメータを追加します

元

<html>
<script type="text/javascript">
        function draw(indent) {
        var canvas = document.getElementById('mycanvas');
        var drawshape = canvas.getContext('2d');
        canvas.width = 800;
        canvas.height = 400;

        drawshape.fillStyle = #00ff00;
        drawshape.fillRect(50 *indent , 50, 20, 20);
    }
</script>
</html>


<?php
$query = 'SELECT * FROM table';
$result = mysql_query($query);
    while($value = mysql_fetch_array($result)) {
        $indent =  $value['indent'];
        echo '<script type="text/javascript">    draw('.$indent.');      </script>';
    }
?>
于 2012-10-11T10:26:57.543 に答える