php中的JavaScript HTML5

Question

我用html5做了一个形状，看起来像冲浪板。 代码：

    <script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(100, 5);
ctx.bezierCurveTo(50,5,-50,300,50,505);
ctx.lineTo(150,505);
ctx.bezierCurveTo(250,300,150,0,100,5);

img = new Image()
img.addEventListener('load', function(e) {
    ctx.fillStyle = ctx.createPattern(this, "repeat");
        ctx.fill();
    }, true);
    
ctx.lineWidth = 5;  
ctx.stroke();
ctx.closePath();


img.src= "<?php echo $uploadfile ?>" 

    </script>

现在我的问题是，我的数据库中存储了多张图片（只有图片路径）。

现在我想显示我存储在数据库中的所有图像，以便以这种形状显示。 所以我的形状是一块冲浪板，现在我想要多个冲浪板并排放置。

<?php
    dbConn();

    $q_select_images = mysql_query("select * from orders");

    while($row = mysql_fetch_array($q_select_images))
    {
         print "<img src=\"/test/". $row['image'] . "\" />";
        
    }
    
    closeDbConn();
    ?>

上面的代码是显示我存储在数据库中的所有图像。 如何组合这两个脚本。

因为仅仅将 JavaScript 代码放在 while{ } 函数中是行不通的。 我想在每次其他图像时重复该形状。

请帮帮我，我想不通。

Answer 1

你可以先抓取所有的图片路径，然后放到一个 JavaScript 数组中：

$images = array();
while ($row = mysql_fetch_array($q_select_images)) {
     $images[] = $row['image'];
}

然后添加这段 JavaScript 代码：

?>
<script type="text/javascript">
var images = <?php echo json_encode($images); ?>,
body = document.getElementsByTagName('body')[0];

for (var i = 0, n = images.length; i < n; ++i) {
    myImageFn(body, images[i]);
}

function myImageFn(container, path)
{
    var c = document.createElement('canvas');
    c.style.width = '200px';
    c.style.height = '510px';

    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(100, 5);
    ctx.bezierCurveTo(50,5,-50,300,50,505);
    ctx.lineTo(150,505);
    ctx.bezierCurveTo(250,300,150,0,100,5);

    img = new Image()
    img.addEventListener('load', function(e) {
        ctx.fillStyle = ctx.createPattern(this, "repeat");
            ctx.fill();
        }, true);

    ctx.lineWidth = 5;  
    ctx.stroke();
    ctx.closePath();

    img.src = path;

    container.appendChild(c);
}

对于每个图像，您仍然需要将它们添加到 DOM。