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

最新推荐文章于 2023-09-27 19:22:28 发布

Wangdanting123

最新推荐文章于 2023-09-27 19:22:28 发布

阅读量3.5k

点赞数

本文链接：https://blog.csdn.net/Wangdanting123/article/details/52196356

版权

//      创建 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);
       }