canvas 手写环形进度条

最新推荐文章于 2025-05-01 16:53:00 发布

yinmeizhuang

最新推荐文章于 2025-05-01 16:53:00 发布

阅读量256

点赞数 1

CC 4.0 BY-SA版权

文章标签： html5 html javascript

本文链接：https://blog.youkuaiyun.com/yinmeizhuang/article/details/120178494

本文详细介绍了如何利用HTML5的canvas元素创建一个手写风格的环形进度条，结合JavaScript实现动态更新进度的功能。通过设置路径、渐变色等技巧，打造了一款视觉效果出色的进度指示器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <a-card :bordered="false">
    <a-row>
      <a-col :span="12">
        <canvas id="canvas" width="500px" height="500px">您的浏览器版本过低</canvas>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
export default {
  name: 'Canvas',
  computed: {},
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 画 环形进度条
      var canvas = document.getElementById('canvas')
      var c = canvas.getContext('2d')
      let currentDeg = 0 // 度从0开始

      // 先绘制背景，这里只绘制一次
      drawCircle()
      drawArc(currentDeg++)

      function drawArc(deg) {
        // 计算deg次时的结束角度
        const to = (Math.PI / 180) * deg
        c.beginPath()
        c.lineWidth = 14
        // 设置线头的样式为圆头，默认是方形(不圆润)
        c.lineCap = 'round'
        var g = c.createLinearGradient(170, 50, 60, 100, 100, 100) // 创建渐变对象  渐变开始点和渐变结束点
        g.addColorStop(0, '#0053e1') // 添加颜色点
        g.addColorStop(1, '#00fafb') // 添加颜色点
        var coverColor = g
        c.strokeStyle = coverColor
        c.arc(200, 200, 80, Math.PI * 0.75, to + Math.PI * 0.75, false)
        // 清空画布上的文字，这里不是清除整个画布哦
        c.clearRect(180, 180, 50, 50)
        c.font = '18px serif'
        const text = ((currentDeg / 270) * 100).toFixed(0) + '%'
        c.fillText(text, 185, 200)
        c.stroke()
        c.closePath()
        if (currentDeg <= Math.PI * (1 + 0.25 - 0.75) * (180 / Math.PI)) {
          setTimeout(function() {
            drawArc(currentDeg++)
          }, 10)
        }
      }

      function drawCircle() {
        c.beginPath()
        c.lineWidth = 14
        c.lineCap = 'round'
        c.strokeStyle = '#ccc'
        c.arc(200, 200, 80, Math.PI * 0.75, Math.PI * 0.25, false)
        c.stroke()
        c.closePath()
      }
    }
  }
}
</script>