脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js canvas drawImage函数

JavaScript canvas 中 drawImage函数及其参数详细介绍

 更新时间：2025年09月10日 17:00:15   作者：Luna-player  
在前端开发里,Canvas的drawImage方法是用于在画布上绘制图像的重要方法,它有三种不同的调用形式,每种形式对应的参数含义和功能各有不同,本文介绍JavaScript canvas中drawImage函数及其参数介绍,感兴趣的朋友参考下吧

在前端开发里，Canvas的drawImage方法是用于在画布上绘制图像的重要方法，它有三种不同的调用形式，每种形式对应的参数含义和功能各有不同。下面为你详细介绍：

一：最简形式：

context.drawImage(image, dx, dy);

参数解释

  • image：此参数为必需项，它可以是一个HTMLImageElement（即<img>元素）、HTMLVideoElement（<video>元素）、HTMLCanvasElement（<canvas>元素）或者ImageBitmap对象。它代表的是要绘制的图像源。
  • dx：这也是必需参数，是一个数字类型的值，用来指定图像在画布上左上角的横坐标位置。
  • dy：同样是必需参数，为数字类型，用于指定图像在画布上左上角的纵坐标位置。

代码示例：

<!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>

在这个例子中，图像会被绘制在画布上距离左上角横坐标 20 像素、纵坐标 20 像素的位置。

二.带有宽度和高度的形式

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

参数解释

  • image：和前面一样，是要绘制的图像源。
  • dx：指定图像在画布上左上角的横坐标位置。
  • dy：指定图像在画布上左上角的纵坐标位置。
  • 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 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>

此例中，图像会被绘制在距离画布左上角横坐标 20 像素、纵坐标 20 像素的位置，并且绘制的宽度和高度都为 100 像素。

三：带有裁剪区域的形式

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

参数解释

  • image：要绘制的图像源。
  • sx：必需的数字参数，指定在图像源上裁剪区域左上角的横坐标位置。
  • sy：必需的数字参数，指定在图像源上裁剪区域左上角的纵坐标位置。
  • sWidth：必需的数字参数，指定在图像源上裁剪区域的宽度。
  • sHeight：必需的数字参数，指定在图像源上裁剪区域的高度。
  • dx：指定裁剪后的图像在画布上左上角的横坐标位置。
  • dy：指定裁剪后的图像在画布上左上角的纵坐标位置。
  • 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>

在这个示例中，会从图像源的横坐标 50 像素、纵坐标 50 像素的位置开始裁剪一个宽度和高度都为 100 像素的区域，然后将这个裁剪后的区域绘制到画布上距离左上角横坐标 20 像素、纵坐标 20 像素的位置，并且绘制的宽度和高度同样为 100 像素。

到此这篇关于JavaScript canvas 中 drawImage函数及其参数详细介绍的文章就介绍到这了,更多相关js canvas drawImage函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论