canvas绘制图片详解

创建对象的方式 < script >     var  canvas =  document . getElementById ( "canvas" );     var  ctx = canvas . getContext ( "2d" );     //1 、     var  img1= document . createElement ( "img" );     img1 . src = "../ 图片 /beauty/55caf02db4861980.jpg!200x200.jpg" ;     document . body . appendChild ( img1 );     //2 、     var  img2= new  Image ();     img2 . src = "../ 图片 /beauty/55caf02db4861980.jpg!200x200.jpg" ;     document . body . appendChild ( img2 ); </ script > 将图片放在canvas画布上：drawImage方法（3个参数的使用） < script >     var  canvas =  document . getElementById ( "canvas" );     var  ctx = canvas . getContext ( "2d" );     //1 、准备图片对象     var  img= new  Image ();     img . src = "../ 图片 /beauty/55caf02db4861980.jpg!200x200.jpg" ;     //2 、将图片绘制到画布中 --> 在图片加载完成之后才能将它绘制到画布中     img .onload = function (){         //drawImage 方法 3 个参数版本：         //  第一个参数表示图片对象         //  第 2/3 个参数表示图片的左上角顶点位于画布的坐标         ctx . drawImage ( img , 0 , 0 );     } </ script > 将图片等比例放在canvas画布中： drawImage方法 （ 五个参数 ） < script >     var  canvas =  document . getElementById ( "canvas" );     var  ctx = canvas . getContext ( "2d" );     //1 、准备图片对象     var  img= new  Image ();     img . src = "../ 图片 /beauty/ChMkJlbKwhGIFzaNABRkaCE3DbUAALGiQJ0DzMAFGSA099.jpg" ;     //2 、将图片绘制到画布中 --> 在图片加载完成之后才能将它绘制到画布中     img .onload = function (){         // 将它等比例缩放在画布中，画布的宽度为 500 像素         //--> 需要计算出图片位于画布中的高度         //--> 公式：图片原始宽度 / 原始高度   =  画布宽度 / 画布高度         ///----> 推导出：画布高度 = 画布宽度 /( 图片原始宽度 / 原始高度 )         var  width = 500 ;         var  height = width / ( img . width /img . height );         ctx . drawImage ( img , 0 , 0 , width , height );     } </ script > drawImage方法九个参数的调用 < script >     var  canvas =  document . getElementById ( "canvas" );     var  ctx = canvas . getContext ( "2d" );     var  img= new  Image ();     img . src = "../ 图片 /beauty/2016110204_670x419.jpg" ;     // 图片中的矩形区域的顶点 280,80     // 矩形区域的宽高： 60,60     img .onload = function (){         //drawImage 9 个参数         // 第一个参数：图片对象         // 第 2/3 个参数：矩形区域的顶点坐标         // 第 4/5 个参数：矩形区域的宽高         // 第 6/7 个参数：矩形区域位于画布的顶点坐标         // 第 8/9 个参数：矩形区域位于画布中的宽高         ctx . drawImage ( img , 280 , 80 , 60 , 60 , 300 , 300 , 60 * 5 , 60 * 5 );     } </ script >