Question

下面是我的拼图图片代码。由于上传功能，我只获得了一张图片，所以请建议我获取更多图片

此文件包含在我的主html代码中，但会显示一个Image，另一个显示为NULL

<html>  
<head>  

    <title>HTML5 Puzzle Game</title>  

    <script type="text/javascript"> 

    window.onload = onReady;


var can;  
var ctx;          
var img;  
var clickX;  
var clickY;  
var selected1;  
var selected2;        
var blockSize   = 160;  
var piecesArray = new Array();  

function onReady()  
{  

    can = document.getElementById('myCanvas');  

    ctx        = can.getContext('2d');            
    img        = new Image();  
    img.onload = onImage1Load;  
    img.src    = "images/<?php echo $crows['product_image1']; ?>";  


}  

function onImage1Load()  
{  
    var r;  
    for(var i = 0; i < 4; i++)  
    {  
        for(var j = 0; j < 3; j++)  
        {  
            r = new Rectangle(i * blockSize, j * blockSize, i*blockSize + blockSize, j * blockSize + blockSize);  
            piecesArray.push(r);  
        }                 
    }  

    scrambleArray(piecesArray, 30);  
    drawImage();  
} 

function Rectangle(left, top, right, bottom)  
{  
    this.left = left;  
    this.top  = top;  
    this.right = right;  
    this.bottom = bottom;  

    this.width = right - left;  
    this.height = bottom - top;  
} 

function scrambleArray(ar, times)  
{  
    var count = 0;  
    var temp;  
    var index1;  
    var index2;  

    while(count < times)  
    {  
        index1 = Math.floor(Math.random()*piecesArray.length);  
        index2 = Math.floor(Math.random()*piecesArray.length);  

        temp = piecesArray[index1];  
        piecesArray[index1] = piecesArray[index2];  
        piecesArray[index2] = temp;  

        count++;  
    }  
}  

function drawImage()  
{  
    var r;  
    for(var i = 0; i < 4; i++)  
    {  
        for(var j = 0; j < 3; j++)  
        {  
            r = piecesArray[i*3+j];                   
            ctx.drawImage(img, r.left, r.top, r.width, r.height, i*blockSize, j*blockSize, blockSize, blockSize);  
            ctx.strokeStyle = "#fff"; 
        }  
    }  
} 

function highlightRect(drawX, drawY)  
{  
    ctx.beginPath();  
    ctx.moveTo(drawX, drawY);  
    ctx.lineTo(drawX + blockSize, drawY);  
    ctx.lineTo(drawX + blockSize, drawY + blockSize);  
    ctx.lineTo(drawX, drawY + blockSize);  
    ctx.lineTo(drawX, drawY);  
    ctx.lineWidth = 2;  

    // set line color  
    ctx.strokeStyle = "#fff";  
    ctx.stroke();  
}  

function swapRects(r1, r2)  
{  
    var index1;  
    var index2;  
    var temp = r1;  

    index1 = piecesArray.indexOf(r1);  
    index2 = piecesArray.indexOf(r2);  

    piecesArray[index1] = r2;  
    piecesArray[index2] = temp;           
}

function onCanvasClick(evt)  
{  
    clickX = evt.offsetX;  
    clickY = evt.offsetY;  

    var drawX         = Math.floor(clickX / blockSize);  
    var drawY         = Math.floor(clickY / blockSize);           
    var index         = drawX * 3 + drawY;            
    var targetRect    = piecesArray[index];  
    var drawHighlight = true;  

    drawX *= blockSize;  
    drawY *= blockSize;  

    ctx.clearRect(0, 0, 640, 480);  

    if(selected1 != undefined && selected2 != undefined)  
    {  
        selected1 = selected2 = undefined;  
    }  

    if(selected1 == undefined)  
    {  
        selected1 = targetRect;  
    }  
    else  
    {  
        selected2 = targetRect;  
        swapRects(selected1, selected2);  
        drawHighlight = false;  
    }  

    drawImage();  

    if(drawHighlight)     
        highlightRect(drawX, drawY);  
}  

    </script>  

</head>  

<body>  

    <div style="margin:0 auto; width:640px; height:480px; border: 4px none #cc6699;">  

       <canvas id="myCanvas" width="640" height="480" onclick="onCanvasClick(event);" style="border:1px dotted #fff;">  
       </canvas>  

    </div>  

</body>  

</html>

益智图像代码我想要更多芳香滑动页面的图像

0 个答案: