【案例简介】

###** . 将图片绘制到画布之上**

解释：

    1. 简单来说，就是将一张图的某个区域，画到画布上的某个区域；
    2. 和ctx.fillStyle = pattern不同的是，pattern是将图片作为背景，该背景位置是固定的，画图只是显示那背景某个区域；
    3. 而本方法画图是取图的全部/一部分（比如400x400的，取他(x:200,y:250,width:50,height:100)区域的图；
    4. 然后放在画图的某个指定区域（如坐标x:100,y:200处），也可以缩放图片大小（比如变为width:300,height:200）；
    5. 运用场景示例：有一个人物八方向四帧动作图，在一个png图上，可以根据需要，只取其中一个，然后绘制到画布区域之中；

**ctx.drawImage(image, dx, dy)**

    1. 将图片完整绘制在画布的x, y坐标处；
    2. x, y是图片绘制时，其左上角位于画布的坐标，参数类型是Number（不是有px的字符串类型）；
    3. 不会对图片进行缩放（即保持图片本身大小）；
    4. image是图片HTML元素，例如通过document.getElementById()获取的HTML的image元素，或者是在JS中，通过new Image()创建的图片元素；
    5. 需要小心一件事，图片在创建后，并不会立刻从服务器下载完成，因此假如图片是后续加载的话，务必要等图片onload事件触发后，再进行绘图；
    6. 应对办法：提前将图片下载好，这样绘制的时候就不必担心图片未加载完成的问题了。

**ctx.drawImage(image, dx, dy, dWidth, dHeight)**

    1. 将图片绘制在画布的x, y坐标处；
    2. 本方法在上一个方法的基础上，增加了缩放功能，dWidth和dHeight表示绘制到画布上时，画布上图片的宽高；
    3. 具体来说，假如一个图片是100*100，dWith和dHeight是200*200，就相当于将图片缩放了200%；

**ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)**

    1. 取出图片的某个区域，然后绘制到画布的某个区域；
    2. dx, dy, dWidth, dHeight和上面2个API表示的内容是一样的；
    3. sx表示图片（即image）取图时的x坐标，sy表示y坐标，sWidth表示从sx开始取的图片的宽度，sHeight表示从sy开始，取的图片的高度；
    4. 示例：假如image的宽高是200*200，这四个参数的值依次是50,50,100,100的话，表示取图片x:50, y:50到x:150, y:150这个范围的区域；
    5. sWidth + sx的值或者sHeight + sy的值可以大于图片本身的宽高，在缩放时，会将超出部分计算在内进行缩放，超出部分视为透明，不会染色；
    6. sWidth和sHeight可以是负数，有效，计算时同样相加即可，同样可以框住一个矩形区域。

具体请参照DEMO：绘制图片.html

【案例截图】

【核心代码】

  //画个图片
    var canvas2 = document.getElementById("canvas2");
    var ctx2 = canvas2.getContext("2d");
    var girl = new Image();
    girl.src = './02.png';
    girl.onload = function () {
        ctx2.drawImage(girl, 0, 0);
    }

    function toAppendImage2() {
        var test = document.getElementById("test2");
        test.removeChild(test.children[0]);
        //创建一个image类型HTML元素
        var img1 = new Image();
        //将canvas2转为base64字符串
        img1.src = canvas2.toDataURL("image/jpeg", 1);
        var a = img1.src;
        console.log(img1.src);
        //将图片添加到div里
        test.appendChild(img1);
        //创建一个image类型HTML元素
        var img2 = new Image();
        //将canvas2转为base64字符串
        img2.src = canvas2.toDataURL("image/jpeg", 0);
        var b = img2.src;
        console.log(a === b);
        //将图片添加到div里
        test.appendChild(img2);
    }