Canvas之6绘制图片

绘图

• 1. cvs.drawImage(Image,x,y,w,h);
     • Image 就是可以放在DOM中的真实图片，可以动态创建，也可以获取页面上的
     • x,y 图片放入画布,在画布左上角的坐标
     • w,h 绘制图片的宽高

• 案例:将图片放在画布上

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

• 1. cvs.drawImage(img_elem,sx,sy,sw,sh,dx,dy,dw,dh);

     • sx,sy 图片左上角的坐标
     • sw,sh 矩形区域的宽高 用来截取图片
     • dx,dy 截取出来放在画布canvas上的坐标

     • dw,dh 画在canvas上的宽高

     • 总结:

       • sw,sy,sx,sy 是用来截取图片的过程
       • dx,dy,dw,dh 把截取出来的图片放在canvas上的过程

• 案例:截取图片

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

• 1. 设置平铺

• cvs.creatPattern(image,type)

  • Image 就是可以放在DOM中的真实图片，可以动态创建，也可以获取页面上的
  • type:
    • no-repeat 不平铺
    • repeat 全方向平铺
    • repeat-x x轴方向平铺
    • repeat-y y轴方向平铺

• 案例

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