HTML canvas drawImage() 方法

HTML canvas 参考手册

<p>要使用的图片:</p>
<img id="scream" src="/examples/img_the_scream.jpg">
<p>画布:</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, 10);
  }
</script>

尝试一下 »

---

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 drawImage() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

---

定义和用法

drawImage() 方法在画布上绘制图像、画布或视频。

drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

JavaScript 语法

在画布上定位图像：

JavaScript 语法：	context.drawImage(img,x,y);

在画布上定位图像，并规定图像的宽度和高度：

JavaScript 语法：	context.drawImage(img,x,y,width,height);

剪切图像，并在画布上定位被剪切的部分：

JavaScript 语法：	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>要使用的图片:</p>
<img id="scream" src="/examples/img_the_scream.jpg">
<p>画布:</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, 10, 150, 180);
  }
</script>

尝试一下 »

剪切图片，并在画布上对被剪切的部分进行定位：

<p>图片应用:</p>
<img id="scream" src="/examples/img_the_scream.jpg">
<p>画布:</p>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
  document.getElementById("scream").onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 90, 130, 50, 60, 10, 10, 50, 60);
  };
</script>

尝试一下 »

要使用的视频（请按下播放键以开始演示）：

<p>要使用的视频:</p>
<video id="video1" controls width="270" autoplay>
    <source src="/examples/mov_bbb.mp4" type='video/mp4'>
    <source src="/examples/mov_bbb.ogg" type='video/ogg'>
    <source src="/examples/mov_bbb.webm" type='video/webm'>
</video>

<p>画布 (代码在每20毫秒绘制当前的视频帧):</p>
<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
  var v = document.getElementById("video1");
  var c = document.getElementById("myCanvas");
  ctx = c.getContext('2d');
  v.addEventListener('play', function() {
    var i = window.setInterval(function() {
      ctx.drawImage(v, 5, 5, 260, 125)
    }, 20);
  }, false);
  v.addEventListener('pause', function() {
    window.clearInterval(i);
  }, false);
  v.addEventListener('ended', function() {
    clearInterval(i);
  }, false);
</script>

尝试一下 »

---

HTML canvas 参考手册