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