canvas-图片的渲染

    <canvas width="1000" height="600" id="mycanvs"></canvas>
    <script>
        var canvas = document.querySelector("canvas");
        var ctx = canvas.getContext("2d");
        //创建图片
        var image = new Image();
        //设置图片地址
        image.src = 'images/2.jpg'
        // 必须要在onLoad之后再进行绘制图片，否则不会渲染
        image.onload = function () {
            //2个参数 图片的xy坐标
            ctx.drawImage(image, 100, 100)
            //4各参数 图片的起始坐标和宽高
            ctx.drawImage(image, 100, 100, 500, 100)
            //参数 408, 81 切片的起始坐标， 147, 182 切片切掉原图的尺寸， 0, 0,切完之后切片的位置400, 400切完之后 切片的大小
            ctx.drawImage(image, 408, 81, 147, 182, 0, 0, 400, 400)
        }
    </script>

ctx.drawImage(image, 100, 100)	ctx.drawImage(image, 100, 100, 200, 120)	ctx.drawImage(image, 408, 81, 147, 182, 200, 200, 147, 182)