图片画到canvas 上的三种方法

第一种：

 /*3参数*/
 /*图片对象*/
 /*绘制在画布上的坐标 x y*/
 //ctx.drawImage(image,100,100);

效果图：

第二种：

 /*5个参数*/
 /*图片对象*/
  /*绘制在画布上的坐标 x y*/
  /*是图片的大小  不是裁剪  是缩放*/
  // 从100,100 开始画，然后缩放到200,20
  //ctx.drawImage(image,100,100,200,200);

效果图：

第三种：

// 从100,100 开始画，然后缩放到200,200
 ctx.drawImage(img,593,327,500,500,100,100,300,300);

从图片的593,327 坐标开始截图，截取 500，500 这么大

然后将截取的图片，从canvas 100，100开始画， 缩放 300，300 这么大！

 /*9个参数*/
 /*图片对象*/
 /*图片上定位的坐标  x y */
 /*在图片上截取多大的区域  w h*/
 /*绘制在画布上的坐标 x y*/
 /*是图片的大小  不是裁剪  是缩放*/
        ctx.drawImage(image,400,400,400,400,200,200,100,100);

效果图：

原图：