canvas绘制图片

html

<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #ccc;">
    你的浏览器不支持canvas
</canvas>

js

 let canvas = document.querySelectorAll('#canvas')[0]
    let context = canvas.getContext('2d')
    let img = new Image()
    window.onload = function () {
        canvas.width = 1152
        canvas.height = 768
        img.src = './445991_145804524184_2.jpg'
        img.onload = function () {
            context.drawImage(img, 0, 0) // 从坐标0，0处开始渲染
            context.drawImage(img, 0, 0, canvas.width, canvas.height) // 从坐标0，0处开始渲染整个画布大小
             // 开始渲染截取图片坐标200，200开始，然后宽为400，高为400的图象到坐标0，0处，铺满整个canvas
            context.drawImage(img, 200, 200, 400, 400,  0, 0, canvas.width, canvas.height)
        }
    }