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（）会被触发并再次开始绘制图像，这将继续递归...

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

1 个答案: