English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل مرجع HTML

كامل علامات HTML

مетод drawImage() لـ HTML canvas

drawImage() 方法提供了多种方式在Canvas上绘制图像。

دليل مرجع HTML canvas

要使用的图片：

مثال على الإنترنت

向画布上面绘制图片：

متصفحك لا يدعم علامة HTML5 canvas. 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>استخدام طريقة drawImage() في HTML canvas - تعليمية أساسية (oldtoolbag.com)</title>
</head>
<body>
<p>要使用的图片:</p>
<img id="scream" src="views.png">
<p>اللوحة:</p>
<canvas id="myCanvas" width="300" height="200" 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>
</body>
</html>
اختبار لرؤية ‹/›

浏览器兼容性

IEFirefoxOperaChromeSafari

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可选。要使用的图像的高度（伸展或缩小图像）。

مثال على الإنترنت

在画布上对图像进行定位，然后规定图像的宽度和高度：

متصفحك لا يدعم علامة HTML5 canvas. 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>استخدام طريقة drawImage() في HTML canvas - تعليمية أساسية (oldtoolbag.com)</title>
</head>
<body>
<p>要使用的图片:</p>
<img id="scream" src="views.png">
<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>
</body>
</html>
اختبار لرؤية ‹/›

مثال على الإنترنت

قص الصورة، وتحديد الموقع للجزء المقطوع في اللوحة:

متصفحك لا يدعم علامة HTML5 canvas. 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>استخدام طريقة drawImage() في HTML canvas - تعليمية أساسية (oldtoolbag.com)</title>
</head>
<body>
<p>تطبيق الصورة:</p>
<img id="scream" src="views.png">
<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>
</body>
</html>
اختبار لرؤية ‹/›

مثال على الإنترنت

الفيديو الذي سيتم استخدامه (انقر على زر التشغيل للبدء في العرض):

اللوحة:

متصفحك لا يدعم علامة canvas.

JavaScript (كل 20 ملي ثانية، يتم رسم إطار الفيديو الحالي):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>استخدام طريقة drawImage() في HTML canvas - تعليمية أساسية (oldtoolbag.com)</title>
</head>
<body>
<p>الفيديو الذي سيتم استخدامه:</p>
<video id="video1" controls width="270" autoplay>
　　　　<source src="movie.mp4" type='video/mp4'>
　　　　<source src="movie.ogg" type='video/ogg'>
　　　　<source src="movie.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>
</body>
</html>
اختبار لرؤية ‹/›
دليل مرجع HTML canvas
HTML: <template> النموذج