Canvas使用drawImage()函数在画布上显示图像

//      创建 javaScript Image实例的方法
        var spaceShip=new Image();
        spaceShip.src="images/ship1.png";
//        代码中调用图像之前,要确定图像已正确加载并准备就绪。
        spaceShip.addEventListener('load',eventShipLoaded,false);
        function eventShipLoaded(){
            drawScreen();
        }
        function drawScreen(){
//            drawImage(Image,dx,dy,dw,dh);dx,dy:画布的目标位置;dw,dh:图像缩放的新的宽度和高度
            context.drawImage(spaceShip,0,0);
            context.drawImage(spaceShip,0,34,32,32);
            context.drawImage(spaceShip,0,68,64,64);
            context.drawImage(spaceShip,0,140,16,16);
       }

你可能感兴趣的:(Canvas使用drawImage()函数在画布上显示图像)