Question

需要在画布图像上的不同位置绘制alphaball.png图像。位置（x和y坐标）需要从数据json对象传递。使用代码提及alphaball.png是不可见的。可以做些什么？

// JSON对象

data = [{
         "x": ["200"],
         "y": ["200"]

     }, {
         "x": ["150"],
         "y": ["150"]
     }, {
         "x": ["300"],
         "y": ["300"]
     }


 ];


window.onload = function(){ 
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');
var dataJSON = data || []
        var files = ["gkhead.jpg", "marker.png"],
        images = [],
        numOfFiles = files.length,
        count = numOfFiles;

        /// function to load all images in one go
        function loadImages() {
            /// go through array of file names
            for(var i = 0; i < numOfFiles; i++) {
                /// create an image element
                var img = document.createElement('img');
                /// use common loader as we need to count files
                img.onload = imageLoaded;
                console.log(imageLoaded);
                //img.onerror = ... handle errors
                img.src = files[i];
                //console.log(img.src);
                /// push image onto array in the same order as file names
                images.push(img);
                //console.log(images);
            }
        }
        loadImages();
        function imageLoaded(e) {
            /// for each successful load we count down
            count--;
            if (count === 0) 
            start(); //start when nothing more to count
        }
        function start() {
        context.drawImage(images[0], 0, 0, 400*scaleValue, 400*scaleValue); 
           for(var i = 0, pos; pos = dataJSON[i]; i++) {
               /// as we know the alpha ball has index 1 we use that here for images
               context.drawImage(images[1], pos.x, pos.y, 40/scaleValue, 40/scaleValue);
           }
        }

function draw1(scaleValue, dataJSON){
        loadImages();

        context.save();     
        context.setTransform(1,0,0,1,0,0)   
        context.globalAlpha = 0.5;                      
        context.clearRect(0, 0, canvas.width, canvas.height);   
        context.restore();          
        context.save(); 
        context.drawImage(images[0], 0, 0, 400*scaleValue, 400*scaleValue); 

        context.scale(scaleValue, scaleValue);
        start();

        context.restore();
    }; 
    draw1(scaleValue, dataJSON);

        var scaleValue = 1;
        var scaleMultiplier = 0.8;
        var startDragOffset = {};
        var mouseDown = false;          
        // add button event listeners
        document.getElementById("plus").addEventListener("click", function(){           
            scaleValue /= scaleMultiplier;              
            draw1(scaleValue, dataJSON);            
        }, false);
         document.getElementById("minus").addEventListener("click", function(){
            scaleValue *= scaleMultiplier;
            draw1(scaleValue, dataJSON);    
        }, false);
        document.getElementById("original_size").addEventListener("click", function(){
            scaleValue = 1;
            draw1(scaleValue, dataJSON);
        }, false);

Answer 1

我不确定为什么要多次加载alpha球，但是你可以将文件加载到一个公共位置：

/// set up some variables to contain images and count
var files = ["gkhead.jpg", "alphaball.png"],
    images = [],
    numOfFiles = files.length,
    count = numOfFiles;

/// function to load all images in one go
function loadImages() {

    /// go through array of file names
    for(var i = 0; i < numOfFiles; i++) {

        /// create an image element
        var img = document.createElement('img');

        /// use common loader as we need to count files
        img.onload = imageLoaded;
        //img.onerror = ... handle errors
        img.src = files[i];

        /// push image onto array in the same order as file names
        images.push(img);
    }
}
function imageLoaded(e) {

    /// for each successful load we count down
    count--;
    if (count === 0) start(); //start when nothing more to count
}

现在你可以画球了：

function start() {
   for(var i = 0, pos; pos = dataJSON[i]; i++) {
       /// as we know the alpha ball has index 1 we use that here for images
       context.drawImage(images[1], pos.x, pos.y, 40/scaleValue, 40/scaleValue);
   }
}

如何从画布图像上的json对象加载图像？

1 个答案: