技術標籤：canvasjavascriptcanvas

    <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)