最新的Web开发教程
 

HTML canvas drawImage() Method

<画布对象

图片使用方法：

那声尖叫

例

绘制图像在画布上：

YourbrowserdoesnotsupporttheHTML5canvastag。

JavaScript的：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
试一试»

浏览器支持

在表中的数字规定，完全支持方法的第一个浏览器版本。

方法
drawImage() 4 9 3.6 4 10.1

定义和用法

所述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 可选的。 图像的宽度用(stretch or reduce the image) 播放 ”
height 可选的。 图像的高度使用(stretch or reduce the image) 播放 ”
例子

更多示例

例

画布上的图像的位置，并指定图像的宽度和高度：

YourbrowserdoesnotsupporttheHTML5canvastag。

JavaScript的：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10,150,180);
试一试»

例

裁剪图像并在画布上的裁剪部分的位置：

YourbrowserdoesnotsupporttheHTML5canvastag。

JavaScript的：

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);
试一试»

例

视频使用(press Play to start the demonstration) ：

帆布：

yourbrowserdoesnotsupportthecanvastag

的JavaScript（代码绘制视频每隔20毫秒的当前帧）：

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);
试一试»
<画布对象