javascript HTML5 в php

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(); 
    ?> 

Этот код должен показывать все изображения, которые я хранил в базе данных. Как объединить эти 2 скрипта.

потому что просто поместив код javascript в то время как функция {} не работает. Я хочу повторить фигуру с каждым другим изображением.

, пожалуйста, помогите мне, я не могу это понять.

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, хотя.