캔버스 이미지에 json 객체의 이미지를로드하는 방법은 무엇입니까?

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

당신이 알파 볼을 여러 번로드,하지만 당신은 일반적인 장소에 파일 로딩을 수집 할 수 있습니다 이유는 확실하지 않다 : 이제

/// 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 
} 

을 수행 할 수 있습니다 공을 그릴 : youcandraw 그것은 canvas..you에 그 비동기 할 필요가 전에

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); 
    } 
}