HTML canvas(画布)drawImage()方法

• 

  drawImage()方法定义和用法

  drawImage()方法将图像，画布或视频绘制到画布上。
  drawImage()方法还可以绘制图像的一部分，和/或增加/减少图像大小。
  

  注意：在加载图像之前，不能调用drawImage()方法。要确保已加载图像，可以从window.onload()或document.getElementById("imageID").onload调用drawImage()。

• 

  drawImage()方法浏览器支持

  Internet Explorer	Chrome	FireFox	Safari	Opera
  9.0（含）以上	支持	支持	支持	支持

• 

  drawImage()方法语法

  将图像放在画布上：

  context.drawImage(img,x,y);

  将图像放在画布上，并指定图像的宽度和高度：

  context.drawImage(img,x,y,width,height);

  剪切图像并将剪切的部分放在画布上：

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

• 

  drawImage()方法实例

  window.onload = function() {
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      var img = document.getElementById("scream");
      ctx.drawImage(img, 10, 10);
  }
  

  尝试一下

  将图像放在画布上，并指定图像的宽度和高度：

  window.onload = function() {
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      var img = document.getElementById("scream");
      ctx.drawImage(img, 10, 10, 150, 180);
  }
  

  尝试一下

  剪切图像并将剪切的部分放在画布上：

  window.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);
  };
  

  尝试一下

  视频示例：代码每20毫秒绘制一次视频的当前帧：

  var v = document.getElementById("video1");
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var i;
  
  v.addEventListener("play", function() {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); 
  

  尝试一下
• 

  drawImage()方法参数值

  参数	描述
  img	指定要使用的图像、画布或视频元素
  sx	可选的。开始剪切的x坐标
  sy	可选的。从哪里开始裁剪的y坐标
  swidth	可选的。剪切图像的宽度
  sheight	可选的。剪切图像的高度
  x	将图像放置在画布上的x坐标
  y	将图像放置在画布上的y坐标
  width	可选的。要使用的图像宽度(拉伸或缩小图像)
  height	可选的。要使用的图像高度(拉伸或缩小图像)

• 

  drawImage()方法相关页面

  HTML教程：HTML脚本

  HTML教程：HTML画布