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>

 

效果：