canvas画圆，圆内有文字

最新推荐文章于 2023-02-22 15:11:32 发布

喵喵虫

最新推荐文章于 2023-02-22 15:11:32 发布

阅读量1.8k

点赞数 2

分类专栏： HTML+CSS3 文章标签： html canvas

本文链接：https://blog.csdn.net/mmiaoChong/article/details/116608673

版权

HTML+CSS3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>canvas的使用</title>
</head>

<body>
  <script>
    window.onload = function () {
      /**
       * W：宽
       * H：高
       * borderWidth：border宽
       * borderColor：border颜色
       * color：背景颜色
       * textColor：文字颜色
       * fontText：圆内的文字
       *  */
      function createCanvas(W, H, borderWidth, borderColor, color, textColor, fontText) {
        var canvas = document.createElement('canvas')
        canvas.width = W
        canvas.height = H
        var ctx = canvas.getContext('2d')
        ctx.beginPath()
        ctx.arc((W + borderWidth) / 2, (H + borderWidth) / 2, 30, 0, Math.PI * 2, true)
        ctx.closePath()
        // 填充背景颜色
        ctx.fillStyle = color
        ctx.fill()

        // 填充边框颜色
        ctx.lineWidth = borderWidth
        ctx.lineCap = 'round'
        ctx.strokeStyle = 'red'
        ctx.stroke() //

        // 填充文字颜色
        ctx.font = "20px Arial"
        ctx.fillStyle = textColor
        ctx.textAlign = "center"
        ctx.fillText(fontText, (W + borderWidth) / 2, (H + borderWidth * 2) / 2)

        return canvas
      }

      for (var i = 0; i < 20; i++) {

        document.body.append(createCanvas(100, 100, 5, 'red', '#555555', '#fff', i))
      }
    }
  </script>
</body>

</html>

效果图

在这里插入图片描述

喵喵虫

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
canvas画圆，圆内有文字

<!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>canvas的使用&
复制链接

扫一扫

专栏目录