使用canvas绘制基本的序号图标

最新推荐文章于 2024-01-14 00:00:00 发布

weixin_44689966

最新推荐文章于 2024-01-14 00:00:00 发布

阅读量418

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_44689966/article/details/126915240

版权

代码

<!DOCTYPE html>
<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>
  <script>
    let text = "1"

    const img = new Image(19, 25)
    img.crossOrigin = "Anonymous"
    img.src = "img/indexMark.png"
    img.onload = () => {
      const canvas = document.createElement("canvas")
      canvas.width = 19
      canvas.height = 25
      const ctx = canvas.getContext("2d")
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      // 绘制图片
      ctx.drawImage(img, 0, 0)
      // 绘制文字
      ctx.fillStyle = "#ffffff"
      ctx.font = "22px 楷体"
      ctx.textBaseline = "middle"
      ctx.fillText(text, 4, 10)
      // 将图片赋予给矢量对象进行显示，this.image是父类的属性
      console.log(canvas.toDataURL("image/png"))
    }
  </script>
</head>
<body>
</body>
</html>

效果

在这里插入图片描述
点击这个链接出现的效果

一般在渲染中序号图标时，会在最开始就渲染好，然后重复使用，这里需要注意的是这整个过程是一个异步的，所以这段代码会出现错误

<!DOCTYPE html>
<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>
  <script>
    let ImgUrl = getCanvas()
    console.log(ImgUrl);

    function getCanvas () {
      let text = "1"
      const img = new Image(19, 25)
      img.crossOrigin = "Anonymous"
      img.src = "img/indexMark.png"
      img.onload = () => {
        const canvas = document.createElement("canvas")
        canvas.width = 19
        canvas.height = 25
        const ctx = canvas.getContext("2d")
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        // 绘制图片
        ctx.drawImage(img, 0, 0)
        // 绘制文字
        ctx.fillStyle = "#ffffff"
        ctx.font = "22px 楷体"
        ctx.textBaseline = "middle"
        ctx.fillText(text, 4, 10)
        // 将图片赋予给矢量对象进行显示，this.image是父类的属性
        return canvas.toDataURL("image/png")
      }
    }
  </script>
</head>
<body>
</body>
</html>

效果，打印出来的是一个undefined
在这里插入图片描述

为了实现效果，可以使用Promise

<!DOCTYPE html>
<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>
  <script>
    let ImgUrl
    getCanvas().then((data) => {
      ImgUrl = data
      console.log("ImgUrl", ImgUrl);
    })

    function getCanvas () {
      return new Promise((resolve) => {
        let text = "1"
        const img = new Image(19, 25)
        img.crossOrigin = "Anonymous"
        img.src = "img/indexMark.png"
        img.onload = () => {
          const canvas = document.createElement("canvas")
          canvas.width = 19
          canvas.height = 25
          const ctx = canvas.getContext("2d")
          ctx.clearRect(0, 0, canvas.width, canvas.height)
          // 绘制图片
          ctx.drawImage(img, 0, 0)
          // 绘制文字
          ctx.fillStyle = "#ffffff"
          ctx.font = "22px 楷体"
          ctx.textBaseline = "middle"
          ctx.fillText(text, 4, 10)
          // 将图片赋予给矢量对象进行显示，this.image是父类的属性
          resolve(canvas.toDataURL("image/png"))
        }
      })
    }
  </script>
</head>
<body>
</body>
</html>