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 >