快捷導(dǎo)航

JavaScript canvas 中 drawImage函數(shù)及其參數(shù)詳細(xì)介紹

更新時間：2025年09月10日 17:00:15 作者：Luna-player

在前端開發(fā)里,Canvas的drawImage方法是用于在畫布上繪制圖像的重要方法,它有三種不同的調(diào)用形式,每種形式對應(yīng)的參數(shù)含義和功能各有不同,本文介紹JavaScript canvas中drawImage函數(shù)及其參數(shù)介紹,感興趣的朋友參考下吧

一：最簡形式：

context.drawImage(image, dx, dy);

參數(shù)解釋

image：此參數(shù)為必需項(xiàng)，它可以是一個HTMLImageElement（即<img>元素）、HTMLVideoElement（<video>元素）、HTMLCanvasElement（<canvas>元素）或者ImageBitmap對象。它代表的是要繪制的圖像源。
dx：這也是必需參數(shù)，是一個數(shù)字類型的值，用來指定圖像在畫布上左上角的橫坐標(biāo)位置。
dy：同樣是必需參數(shù)，為數(shù)字類型，用于指定圖像在畫布上左上角的縱坐標(biāo)位置。

代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas drawImage Example 1</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = 'example.jpg';
        img.onload = function () {
            ctx.drawImage(img, 20, 20);
        };
    </script>
</body>
</html>

在這個例子中，圖像會被繪制在畫布上距離左上角橫坐標(biāo) 20 像素、縱坐標(biāo) 20 像素的位置。

二.帶有寬度和高度的形式

context.drawImage(image, dx, dy, dWidth, dHeight);

參數(shù)解釋

image：和前面一樣，是要繪制的圖像源。
dx：指定圖像在畫布上左上角的橫坐標(biāo)位置。
dy：指定圖像在畫布上左上角的縱坐標(biāo)位置。
dWidth：這是一個可選的數(shù)字參數(shù)，用于指定圖像在畫布上繪制的寬度。若不提供該參數(shù)，圖像會以原始寬度繪制。
dHeight：也是可選的數(shù)字參數(shù)，用于指定圖像在畫布上繪制的高度。若不提供該參數(shù)，圖像會以原始高度繪制。

代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas drawImage Example 2</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = 'example.jpg';
        img.onload = function () {
            ctx.drawImage(img, 20, 20, 100, 100);
        };
    </script>
</body>
</html>

此例中，圖像會被繪制在距離畫布左上角橫坐標(biāo) 20 像素、縱坐標(biāo) 20 像素的位置，并且繪制的寬度和高度都為 100 像素。

三：帶有裁剪區(qū)域的形式

context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

參數(shù)解釋

image：要繪制的圖像源。
sx：必需的數(shù)字參數(shù)，指定在圖像源上裁剪區(qū)域左上角的橫坐標(biāo)位置。
sy：必需的數(shù)字參數(shù)，指定在圖像源上裁剪區(qū)域左上角的縱坐標(biāo)位置。
sWidth：必需的數(shù)字參數(shù)，指定在圖像源上裁剪區(qū)域的寬度。
sHeight：必需的數(shù)字參數(shù)，指定在圖像源上裁剪區(qū)域的高度。
dx：指定裁剪后的圖像在畫布上左上角的橫坐標(biāo)位置。
dy：指定裁剪后的圖像在畫布上左上角的縱坐標(biāo)位置。
dWidth：指定裁剪后的圖像在畫布上繪制的寬度。
dHeight：指定裁剪后的圖像在畫布上繪制的高度。

代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas drawImage Example 3</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = 'example.jpg';
        img.onload = function () {
            ctx.drawImage(img, 50, 50, 100, 100, 20, 20, 100, 100);
        };
    </script>
</body>
</html>

在這個示例中，會從圖像源的橫坐標(biāo) 50 像素、縱坐標(biāo) 50 像素的位置開始裁剪一個寬度和高度都為 100 像素的區(qū)域，然后將這個裁剪后的區(qū)域繪制到畫布上距離左上角橫坐標(biāo) 20 像素、縱坐標(biāo) 20 像素的位置，并且繪制的寬度和高度同樣為 100 像素。

到此這篇關(guān)于JavaScript canvas 中 drawImage函數(shù)及其參數(shù)詳細(xì)介紹的文章就介紹到這了,更多相關(guān)js canvas drawImage函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: