Hình ảnh canvas HTML
Canvas HTML - Vẽ hình ảnh
Phương thức drawImage()
vẽ một hình ảnh lên canvas.
Phương thức drawImage()
có thể được sử dụng với ba cú pháp khác nhau:
-
drawImage(image, dx, dy)
-
drawImage(image, dx, dy, dwidth, dheight)
-
drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)
Các ví dụ dưới đây giải thích ba cú pháp khác nhau.
drawImage(hình ảnh, dx, dy)
Cú pháp drawImage(image, dx, dy)
định vị hình ảnh trên khung vẽ.
Ví dụ
Vẽ hình ảnh ở vị trí (10, 10) trên canvas:
<script>
const canvas = document.getElementById("myCanvas");
const ctx =
canvas.getContext("2d");
const image = document.getElementById("scream");
image.addEventListener("load", (e) => {
ctx.drawImage(image, 10,
10);
});
</script>
Hãy tự mình thử »drawImage(hình ảnh, dx, dy, dwidth, dheight)
Cú pháp drawImage(image, dx, dy, dwidth, dheight)
định vị hình ảnh trên canvas và chỉ định chiều rộng và chiều cao của hình ảnh trên canvas.
Ví dụ
Vẽ hình ảnh ở vị trí (10, 10) trên canvas, có chiều rộng và chiều cao là 80 pixel:
<script>
const canvas = document.getElementById("myCanvas");
const ctx =
canvas.getContext("2d");
const image = document.getElementById("scream");
image.addEventListener("load", (e) => {
ctx.drawImage(image, 10,
10, 80, 80);
});
</script>
Hãy tự mình thử »drawImage(hình ảnh, sx, sy, swidth, sheeight, dx, dy, dwidth, dheight)
Cú pháp drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)
được sử dụng để cắt hình ảnh nguồn trước khi nó được đặt trên khung vẽ.
Ví dụ
Ở đây, chúng tôi cắt hình ảnh nguồn từ vị trí (90, 130), với chiều rộng là 50 và chiều cao là 60, sau đó đặt phần được cắt trên khung vẽ ở vị trí (10, 10), với chiều rộng và chiều cao là 150 và 160 pixel (vì vậy hình ảnh nguồn được cắt bớt cũng sẽ được thu nhỏ/kéo dài:
<script>
const canvas = document.getElementById("myCanvas");
const ctx =
canvas.getContext("2d");
const image = document.getElementById("scream");
image.addEventListener("load", (e) => {
ctx.drawImage(image,
90, 130, 50, 60, 10, 10, 150, 160);
});
</script>
Hãy tự mình thử » Dưới đây là các tham số của phương thức drawImage()
:
Parameter | Description |
---|---|
image | Required. The image to draw into the context |
sx | Optional. The x-coordinate of the top-left corner of the source image (for clipping the source image) |
sy | Optional. The y-coordinate of the top-left corner of the source image (for clipping the source image) |
swidth | Optional. The width of the clipping of the source image, in pixels |
sheight | Optional. The height of the clipping of the source image, in pixels |
dx | The x-coordinate in the canvas where to place the top-left corner of the source image |
dy | The y-coordinate in the canvas where to place the top-left corner of the source image |
dwidth | Optional. The width to draw the image in the destination canvas. This allows scaling of the image |
dheight | Optional. The height to draw the image in the destination canvas. This allows scaling of the image |