如何在畫布上繪制多個圖像？

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（）時，將觸發並再次開始繪制圖像，這將以遞歸方式繼續...