HTML5 canvas画布详解（五）
drawImage共提供了三个方法：
1.在画布上定位图像。
context.drawImage(img,x,y);
2.在画布上定位图像，并指定图像的宽度和高度。
context.drawImage(img,x,y,width,height);
3.裁切图像，并在画布上定位被裁切的部分。
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
| 参数 | 描述 |
|---|---|
| img | 规定要使用的图像、画布或视频。 |
| sx | 开始剪切图像的 x 坐标位置。 |
| sy | 开始剪切图像的 y 坐标位置。 |
| swidth | 被剪切图像的宽度。 |
| sheight | 被剪切图像的高度。 |
| x | 在画布上放置图像的 x 坐标位置。 |
| y | 在画布上放置图像的 y 坐标位置。 |
| width | 要绘制的图像的宽度。（伸展或缩小图像） |
| height | 要绘制的图像的高度。（伸展或缩小图像） |
下面代码包含了以上把图像绘制到canvas上的三种方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas绘图</title>
<script>
window.onload = function()
{
drawCanvas1();
drawCanvas2();
drawCanvas3();
}
//context.drawImage(img,x,y);
function drawCanvas1()
{
var canvas = document.getElementById("myCanvas1");
var context = canvas.getContext("2d");
//将图片绘制到canvas上
var img = new Image();
img.src = "1.jpg";
img.onload = function()
{
context.drawImage(img, 0, 0);
};
context.textAlign = "center";
context.fillText("context.drawImage(img,x,y)画原图", 250, 350);
}
//context.drawImage(img,x,y,width,height);
function drawCanvas2()
{
var canvas = document.getElementById("myCanvas2");
var context = canvas.getContext("2d");
//将图片绘制到canvas上
var img = new Image();
img.src = "1.jpg";
img.onload = function()
{
context.drawImage(img, 0, 0, 500, 300);
};
context.textAlign = "center";
context.fillText("context.drawImage(img,x,y,width,height)指定宽和高进行拉伸和缩放", 250, 350);
}
//context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
function drawCanvas3()
{
var canvas = document.getElementById("myCanvas3");
var context = canvas.getContext("2d");
//将图片绘制到canvas上
var img = new Image();
img.src = "1.jpg";
img.onload = function()
{
context.drawImage(img, 200,100, 200, 200, 0, 0, 200, 200);
};
context.textAlign = "center";
context.fillText("context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)", 250, 350);
context.fillText("裁切图片的一部分绘制在画布上，并可进行缩放", 250, 370);
}
</script>
</head>
<body>
<canvas id="myCanvas1" width="500" height="400" style="border:#F00 solid 1px">
您的浏览器不支持canvas
</canvas>
<canvas id="myCanvas2" width="500" height="400" style="border:#F00 solid 1px">
您的浏览器不支持canvas
</canvas>
<canvas id="myCanvas3" width="500" height="400" style="border:#F00 solid 1px">
您的浏览器不支持canvas
</canvas>
<br />
</body>
</html>效果如下： 
第一幅：context.drawImage(img, 0, 0)为从画布(0,0)开始绘制，绘制图像原大小。
第二幅：context.drawImage(img, 0, 0, 500, 300)表示为从画布(0,0)开始绘制，并指定绘制图像的宽和高分别为500、300，因此原图会被拉伸或缩小。
第三幅：context.drawImage(img, 200,100, 200, 200, 0, 0, 200, 200);表示从图像的(200,100)位置开始裁切宽和高分别为200、200的部分，并放置在画布的(0,0)位置，并指定绘制图像的宽高分别为200、200。
Atas ialah kandungan terperinci HTML5 canvas画布详解（五）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1393
52
37
110
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
