二、绘制图片

将一张图片放在canvas上，可以通过：

① 插入图片

② 设置背景图

③ drawImage

2.1 drawImage

绘制图片可以分为三种方式

2.1.1 以原尺寸绘制图片

ctx.drawImage(img, x, y)
    img：要绘制的图片
    x：当前canvas上的x点
    y：当前canvas上的y点

// 绘制图片
// ctx.drawImage(img, 0, 0);  // 存在但是无法正常显示
// 添加 load 事件
img.onload = function(){
    // 当图片加载完毕之后绘制图片
    ctx.drawImage(img, 0, 0);
}

2.1.2 缩放图片

ctx.drawImage(img, x, y, w, h)
    img：要绘制的图片
    x：缩放后的图片放在当前canvas上的x点
    y：缩放后的图片放在当前canvas上的y点
    w：缩放后的图片宽
    h：缩放后的图片高

ctx.drawImage(img, 0, 0, 1024, 682.5);  // 原图为 2048*1365

2.1.3 截取图片并缩放图片

ctx.drawImage(img, img_x, img_y, img_w, img_h, canvas_x, canvas_y, canvas_w,canvas_h)
    img：要绘制的图片
    img_x：要截取的图片的x点
    img_y：要截取的图片的y点
    img_w：要截取的图片宽
    img_h：要截取的图片高
    canvas_x：将截取后的图片放在canvas上的x点
    canvas_y：将截取后的图片放在canvas上的y点
    canvas_w：已缩放后的图片宽放在canvas上
    canvas_h：已缩放后的图片高放在canvas上

ctx.drawImage(img, 581, 249, 1364, 1154, 0, 0, 450, 577);