最新的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);
試一試»
<畫布對象