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>';

但是你已经定义了 function 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

您的问题是由于您输出的javascript函数的值$indent在循环中设置之前。执行循环时，虽然分配了 variable $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>'

?>

这样，您每次都将 indent 的新值传递给函数

于 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 回答