如何在画布上绘制多个图像？

Question

我能够处理一个图像，能够平滑地缩放和平移，并且能够绘制该图像的形状。

在画布上绘制两幅图像。但是当我缩放它时，Chrome会崩溃。

gkhead.jpg是主要图像，并在此图像上绘制alphaball.png图像。

window.addEventListener('load', eventWindowLoaded, false); 
    function eventWindowLoaded() { 
     canvasApp(); 
    } 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext('2d'); 
    function canvasApp(){ 
     var canvas = document.getElementById("myCanvas"); 
     var context = canvas.getContext('2d'); 
     eventShipLoaded(); 
     function eventShipLoaded() {   
      draw1(scaleValue); 
     } 

     function draw1(scaleValue){      
      var tileSheet = new Image(); 
      tileSheet.addEventListener('load', eventShipLoaded , false); 
      tileSheet.src = "gkhead.jpg"; 

      var tileSheet1 = new Image(); 
      tileSheet1.addEventListener('load', eventShipLoaded , false); 
      tileSheet1.src = "alphaball.png";   

      var x = 0; 
      var y = 0;  
      var width = 480; 
      var height = 480; 

      context.save();  
      context.setTransform(1,0,0,1,0,0) 
      context.globalAlpha = 0.5;   
      //context.drawImage(tileSheet,x,y, width, height); 
      context.clearRect(0, 0, canvas.width, canvas.height); 
      context.restore(); 
      //drawBoard(); 
      context.save(); 
      context.drawImage(tileSheet, x, y, tileSheet.width*scaleValue, tileSheet.height*scaleValue);    
      context.scale(scaleValue, scaleValue); 
      context.drawImage(tileSheet1, 200, 200, 40/scaleValue, 40/scaleValue); 
      context.restore(); 

      /*context.globalAlpha = 0.5;    
      context.fillStyle = "blue"; 
      context.fillRect(180, 180, 40/scaleValue, 40/scaleValue); 
      context.fillRect(260, 190, 40/scaleValue, 40/scaleValue);*/ 

     }; 


      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); 
       //eventShipLoaded(); 
      }, false); 
      document.getElementById("minus").addEventListener("click", function(){ 
       scaleValue *= scaleMultiplier; 
       //draw1(scaleValue);     
       eventShipLoaded(); 
      }, false); 
      document.getElementById("original_size").addEventListener("click", function(){ 
       scaleValue = 1; 
       //draw1(scaleValue);   
       eventShipLoaded(); 
      }, false); 

     var isDown = false; 
     var startCoords = []; 
     var last = [0, 0]; 

     canvas.onmousedown = function(e){ 
      isDown = true; 

      startCoords = [ 
       e.offsetX - last[0], 
       e.offsetY - last[1] 
      ]; 
     }; 

     canvas.onmouseup = function(e){ 
      isDown = false; 

      last = [ 
       e.offsetX - startCoords[0], // set last coordinates 
       e.offsetY - startCoords[1] 
      ]; 
     }; 

     canvas.onmousemove = function(e){ 
      if(!isDown) return; 

      var x = e.offsetX; 
      var y = e.offsetY; 
      context.setTransform(1, 0, 0, 1, x - startCoords[0], y - startCoords[1]); 
      //draw1(scaleValue);  
      eventShipLoaded(); 
     } 

    } 

Answer 1

你在这里检查递归的可能性吗？在绘制之前，您已将附加事件附加到图像上。当你在里面的时候，你自己附上了draw1（）。当您开始在画布上绘制图像时，draw1（）会被触发并再次开始绘制图像，并且会以递归方式继续...