Canvas之6绘制图片

1
  function draw1(){
2
    var img=new Image;//动态创建一个img
3
    img.src='default.gif';//添加图片链接
4
    img.onload=function(){//如果图片地址真实存在 执行这个函数
5
      cvs.drawImage(this,0,100,100,90);
6
      //将图片放在画布上 图片左上角的坐标0,100 图片宽100px 高90px
7
    }
8
  }
9
  draw1();

1
  function draw2(){
2
    var img=new Image;//动态创建一个img
3
    img.src='1.jpg';//添加图片链接
4
    img.onload=function(){//如果图片地址真实存在 执行这个函数
5
      cvs.drawImage(this,480,150,440,410,0,0,200,200);
6
      //this就是img 将图片放在画布上 需要截取的图片在原图片左上角的坐标480,150  截取图片的大小为440px*410px 截取出来的图片放入画布的坐标0,0 截取出来的图片画在画布canvas的宽200px 高200px
7
    }
8
  }
9
//  draw2();

1
function draw3(){
2
  var img=new Image;
3
  img.src='default.gif';
4
  img.onload=function(){
5
    var rep=cvs.createPattern(this,'repeat');//设置图片平铺
6
    cvs.fillStyle=rep;//设置填充样式为图片平铺
7
    cvs.fillRect(0,0,draw.width,draw.height);
8
    //draw.width画布的宽 draw.height画布的高
9
    //设置填充矩形 矩形左上角坐标0,0 矩形的宽为画布的宽 矩形的高为画布的高
10
  }
11
}
12
//draw3();