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>