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画布