canvas - 绘制文本

最新推荐文章于 2024-07-22 18:18:11 发布

itmacy

最新推荐文章于 2024-07-22 18:18:11 发布

阅读量347

点赞数

分类专栏： canvas 文章标签： javascript

本文链接：https://blog.csdn.net/itmacy/article/details/131090288

版权

canvas 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在上个例子中，简单演示了在canvas上加载图片，这个例子则在之前的基础上，使用canvas绘制文本，即在图片上加上水印。

使用以下代码，可以在canvas上绘制文本

   const canvas = document.querySelector('#canvas')
   const c2 = canvas.getContext('2d')
   c2.beginPath()
   c2.fillStyle = '#ffff00'// 设置填充画笔颜色，即字体颜色
   c2.font = 'normal bold 18px serif' // 设置字体大小
   c2.fillText('大家好，我是itmacy', 100, 120) // 绘制 "实心" 文字，以及位置
   c2.closePath()

完整例子代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>

<script>

  drawImg()

  function drawImg () {
    const canvas = document.querySelector('#canvas')
    const c2 = canvas.getContext('2d')
    const image=new Image()
    image.src = 'https://img0.baidu.com/it/u=741268616,1401664941&fm=253&fmt=auto&app=138&f=JPEG?w=748&h=500'
    // 加载原图片大小
    // image.onload = () => {
    //   const _width = image.width
    //   const _height = image.height
    //   canvas.setAttribute('width', _width)
    //   canvas.setAttribute('height', _height)
    //   // 绘制图片
    //   c2.drawImage(image, 0, 0, image.width, image.height)
    // }
    // 等比例缩放图片
    image.onload = () => {
      const _width = image.width * 0.5
      const _height = image.height * 0.5
      canvas.setAttribute('width', _width)
      canvas.setAttribute('height', _height)
      // 绘制图片
      c2.drawImage(image, 0, 0, image.width, image.height, 0, 0, _width, _height)

      // 绘制文字
      c2.beginPath()
      c2.fillStyle = '#ffff00'// 设置填充画笔颜色，即字体颜色
      c2.font = 'normal bold 18px serif' // 设置字体大小
      c2.fillText('大家好，我是itmacy', 100, 120) // 绘制 "实心" 文字;
      c2.closePath()
    }
  }

</script>
</body>
</html>