drawImage()方法调用问题 Canvas

本文探讨了在HTML5 Canvas中drawImage()方法的使用,详细解释了其九个参数的含义,包括图片裁剪和绘制的位置与大小。当直接调用方法时,如果图片未加载完成会导致绘制失败。解决这个问题的方法是在图片对象上添加onload事件,确保图片加载完成后进行绘制。若需连续绘制新图片,可以使用定时器每隔40毫秒重绘画布。

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

在canvas中有个图片引用的方法
drawImage();
首先这个方法有几个参数context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
1.引用的链接
2.引用物体从x坐标点开始裁剪
3.引用物体从y坐标点开始裁剪,
4.被裁减的宽度
5.被裁减的高度
6.引用图片从x坐标点开始绘制
7.引用图片从y坐标点开始绘制,
8.引用图片的宽,
9.引用图片的高

下面是遇到的问题
如果直接进行调用方法

        var can =document.getElementById('canvas');
        var ctx = can.getContext('2d');

        ctx.fillStyle='red';
        ctx.fillRect(0,0,400,400);
        ctx.fill();

            ctx.beginPath();
            var girlPic=new Image();
            girlPic.src='images/girl.jpg';
            ctx.drawImage(girlPic,0,0,200,200);
            ctx.stroke();

引用的图片无法被绘制出来,
只有红色背景可以显示
需要给图片对象加上onload事件

var can =document.getElementById('canvas');
        var ctx = can.getContext('2d');

        ctx.fillStyle='red';
        ctx.fillRect(0,0,400,400);
        ctx.fill();

            ctx.beginPath();
            var girlPic=new Image();
            girlPic.src='images/girl.jpg';

            //其它不变,这里需要用onload包起来
            girlPic.onload=function(){
                ctx.drawImage(girlPic,0,0,200,200);
            }

            ctx.stroke();

图片显示出来了
如果说还要再绘制新的图片 可以开起一个定时器

setInterval(function(){
            ctx.beginPath();
            var girlPic=new Image();
            girlPic.src='images/girl.jpg';
            ctx.drawImage(girlPic,0,0,200,200);
            ctx.stroke();
        },40);

这样也的话每40毫秒就会重新绘制一次画布,也是可以的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值