JavaScript HTML5 in php

JavaScript HTML5 in php

本文关键字：php in HTML5 JavaScript      更新时间：2023-09-26

我用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{}函数中不起作用。我想每次用另一张图片重复这个形状。

请帮帮我，我想不明白。

您可以先抓取所有图像路径并将它们放入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中。

相关文章：