HTML5 canvas drawImage() 方法

剪切圖像，並在畫布上定位被剪切的部分

context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

參數值：

img：      規定要使用的圖像、畫布或視頻。

sx：         可選。開始剪切的 x 坐標位置。

sy：         可選。開始剪切的 y 坐標位置。

swidth：   可選。被剪切圖像的寬度。

sheight：  可選。被剪切圖像的高度。

x：           在畫布上放置圖像的 x 坐標位置。

y：           在畫布上放置圖像的 y 坐標位置。

width：     可選。要使用的圖像的寬度。（伸展或縮小圖像）

height：    可選。要使用的圖像的高度。（伸展或縮小圖像）

<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標簽。</canvas>

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");

    img.onload = function() {
        ctx.drawImage(img,10,20,200,200,10,10,200, 200);
    } 
</script>

 

效果：