通过 canvas 绘制图像

最新推荐文章于 2024-05-10 10:10:22 发布

阿叶今天敲代码了吗

最新推荐文章于 2024-05-10 10:10:22 发布

阅读量450

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_42816270/article/details/128729982

版权

drawImage 语法

在 canvas 中可以通过函数 drawImage 在 canvas 中进行图片、视频和 canvas对象等。
canvas 提供了三种语法：

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

drawImage 参数

canvas 参数含义

image: 绘制到 canvas 中的图像。
sx, sy: （对图像进行裁剪的）裁剪框的左上角的X轴坐标和Y轴坐标。
sWidth, sHeight: 裁剪框的宽度和高度。
dx, dy: 绘制到 canvas 中的元素，在canvas中的左上角的X轴坐标和Y轴坐标。
dWidth, dHeight: 绘制到 canvas 中的元素，在canvas绘制的宽度和高度。

drawImage 的使用

使用下图进行实践：
在这里插入图片描述

drawImage(image, dx, dy)

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #canvas {
        box-shadow: 0px 0px 6px #ccc;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400" height="300"> 您的浏览器不支持canvas </canvas>
    <script>
      const canvas = document.querySelector("#canvas");
      if (canvas.getContext) {
        // 获取绘图上下文
        var ctx = canvas.getContext("2d");
        var image = new Image()
        image.src = 'https://cdn.pixabay.com/photo/2017/12/05/16/44/christmas-2999743_1280.jpg'
        image.onload = () => {
          ctx.drawImage(image, 0, 0)
        }
      }
    </script>
  </body>
</html>

以上代码，通过建议一个图像元素，在图片加载完之后，将图片绘制在 canvas 中，并设置图片的左上角为坐标为 (0, 0)，非常奇怪啊，只显示了图片的左上角，查看了图片的详细信息，图片的宽高为 1280px * 853px，画布的宽度为400px，因此只展示了图片的一部分。由此可见，drawImage(image, dx, dy) 是不改变图片本身的大小的。
在这里插入图片描述

drawImage(image, dx, dy, dWidth, dHeight)

<script>
  const canvas = document.querySelector("#canvas");
  if (canvas.getContext) {
    // 获取绘图上下文
    var ctx = canvas.getContext("2d");
    var image = new Image()
    image.src = 'https://cdn.pixabay.com/photo/2017/12/05/16/44/christmas-2999743_1280.jpg'
    image.onload = () => {
      // 增加参数 300 和 200
      ctx.drawImage(image, 0, 0, 300, 200)
    }
  }
</script>

我们设置图片的左上角位置为（0, 0）, 宽度为300px, 高度为200px, 成功修改了图片的宽度和高度，效果如下所示：
在这里插入图片描述

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

<script>
  const canvas = document.querySelector("#canvas");
  if (canvas.getContext) {
    // 获取绘图上下文
    var ctx = canvas.getContext("2d");
    var image = new Image()
    image.src = 'https://cdn.pixabay.com/photo/2017/12/05/16/44/christmas-2999743_1280.jpg'
    image.onload = () => {
      // 截取图片的礼物的部分，并且将其的宽高设置为200px 和 200px
      ctx.drawImage(image, 700, 0, 600, 600, 50, 50, 200, 200)
    }
  }
</script>

如上代码，我们截取图片的横坐标700px, 纵坐标300px，宽度600px，高度600px, 放在 canvas 上坐标（50，50）的并缩放图片大小到宽度200px，高度200px的位置，效果如下：

在这里插入图片描述
以上就是 canvas 中 drawImage 的方法的基本使用。