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

最新推荐文章于 2025-05-17 06:18:40 发布

Wangdanting123

最新推荐文章于 2025-05-17 06:18:40 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Wangdanting123/article/details/52196356

本文介绍如何使用JavaScript创建Image对象并加载图像资源。通过监听load事件确保图像加载完成后再进行绘制，并展示了不同尺寸和位置的图像绘制示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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