drawImage()方法调用问题 Canvas

来源：互联网发布：html5欢乐斗地主源码编辑：程序博客网时间：2024/05/21 10:50

在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毫秒就会重新绘制一次画布，也是可以的

0 0