Javascript Html5画布使用JCanvasScript加载图像

大家好，我想用JCanvasScript在html5画布上加载多个图像，但我做不到。我想在每一行中并排加载图像。为此，我使用函数loadx（numX，numY）numX-表示一行中的图像数，numY表示行数。例如，loadX（5,4）或loadX（10,3）只给了我一张图像就得到了相同的结果

这是一个密码

    <script>
        function init(){
            loadx(5, 4);
        }

        function loadx(numX, numY){
            var numTotal = numX * numY;
            var imgBMPs = [];
            var sliceImg = new Image();
            sliceImg.src = "abstract.jpg";
            var sliceBmp;
            var imgBmp = [];
            imgBmp['width'] = sliceImg.width / numX;
            imgBmp['height'] = sliceImg.height / numY;
            imgBmp['row'] = 0;
            imgBmp['y'] = 0;

            sliceImg.onload = function(){
                for (i = 0; i < numY; i++){
                imgBmp['y'] = i * imgBmp['height'];
                    for (a = 0; a < numX; a++){
                        jc.start('canvas');
                        imgBmp = new jc.image(sliceImg, a * imgBmp['width'], imgBmp['y'], imgBmp['width'], imgBmp['height']);
                        imgBMPs.push(imgBmp);
                        jc.start('canvas');
                    }

                }
            }
        }
    </script>

---

当我刷新页面时，第一个结果是数字，但另一个结果是“未定义”，那么有什么问题吗？

在内部for循环中，您正在将变量

imgBmp

重新分配给

js.image

的一个实例。这意味着当循环第二次迭代时，原始对象的属性将丢失

尝试按如下方式更新代码：

<script>
    function init(){
        loadx(5, 4);
    }

    function loadx(numX, numY){
        var numTotal = numX * numY;
        var imgBMPs = [];
        var sliceImg = new Image();
        sliceImg.src = "abstract.jpg";
        var sliceBmp;


        /*
           // imgBmp is being used as an object not an array 
           // so the following syntax is usually preferred
           var imgBmp = {
               width: sliceImg.width / numx,
               height: sliceImg.height / numy
           }

           // and to retrieve a property:
           console.log(imgBmp.width);
        */

        var imgBmp = [];
        imgBmp['width'] = sliceImg.width / numX;
        imgBmp['height'] = sliceImg.height / numY;
        imgBmp['row'] = 0;
        imgBmp['y'] = 0;

        sliceImg.onload = function(){
            for (i = 0; i < numY; i++){
            imgBmp['y'] = i * imgBmp['height'];
                for (a = 0; a < numX; a++){
                    jc.start('canvas');
                    // create a new variable to hold the instance of jc.image
                    // so the original object reference is preserved 
                    var jcImage = new jc.image(sliceImg, a * imgBmp['width'], imgBmp['y'], imgBmp['width'], imgBmp['height']);
                    imgBMPs.push(jcImage);                        
                    //imgBmp = new jc.image(sliceImg, a * imgBmp['width'], imgBmp['y'], imgBmp['width'], imgBmp['height']);
                    //imgBMPs.push(imgBmp);
                    jc.start('canvas');
                }

            }
        }
    }
</script>

函数init（）{
loadx（5,4）；
}
函数loadx（numX，numY）{
var numTotal=numX*numY；
var-imgBMPs=[]；
var sliceImg=新图像（）；
sliceImg.src=“abstract.jpg”；
var-bmp；
/*
//imgBmp正在用作对象而不是数组
//因此，以下语法通常是首选的
变量imgBmp={
宽度：sliceImg.width/numx，
高度：切片高度/numy
}
//以及检索属性：
控制台日志（imgBmp.width）；
*/
var imgBmp=[]；
imgBmp['width']=sliceImg.width/numX；
imgBmp['height']=切片img.height/numY；
imgBmp['row']=0；
imgBmp['y']=0；
sliceImg.onload=函数（）{
对于（i=0；i

你调试的结果是什么？@Hidde我更新了我的帖子。请看。

alert (imgBmp['height']);

<script>
    function init(){
        loadx(5, 4);
    }

    function loadx(numX, numY){
        var numTotal = numX * numY;
        var imgBMPs = [];
        var sliceImg = new Image();
        sliceImg.src = "abstract.jpg";
        var sliceBmp;


        /*
           // imgBmp is being used as an object not an array 
           // so the following syntax is usually preferred
           var imgBmp = {
               width: sliceImg.width / numx,
               height: sliceImg.height / numy
           }

           // and to retrieve a property:
           console.log(imgBmp.width);
        */

        var imgBmp = [];
        imgBmp['width'] = sliceImg.width / numX;
        imgBmp['height'] = sliceImg.height / numY;
        imgBmp['row'] = 0;
        imgBmp['y'] = 0;

        sliceImg.onload = function(){
            for (i = 0; i < numY; i++){
            imgBmp['y'] = i * imgBmp['height'];
                for (a = 0; a < numX; a++){
                    jc.start('canvas');
                    // create a new variable to hold the instance of jc.image
                    // so the original object reference is preserved 
                    var jcImage = new jc.image(sliceImg, a * imgBmp['width'], imgBmp['y'], imgBmp['width'], imgBmp['height']);
                    imgBMPs.push(jcImage);                        
                    //imgBmp = new jc.image(sliceImg, a * imgBmp['width'], imgBmp['y'], imgBmp['width'], imgBmp['height']);
                    //imgBMPs.push(imgBmp);
                    jc.start('canvas');
                }

            }
        }
    }
</script>