uniapp使用canvas写环形进度条

最新推荐文章于 2025-10-29 15:55:35 发布

原创

最新推荐文章于 2025-10-29 15:55:35 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #uniapp #微信小程序

这篇博客主要讨论了在uni-app中使用canvas2d绘制图形时遇到的问题，包括需要延迟执行draw()和stroke()才能生效，以及在微信开发者工具中canvas固定在屏幕上的异常现象。作者通过使用uni.createSelectorQuery().in(this)来正确获取组件内的canvas实例，并展示了如何绘制圆形轨道、进度条和文字的方法。问题在手机端表现正常，提示开发者注意在不同环境下进行适配测试。

遇到的坑

使用普通canvas需要延迟设置draw() stroke()才生效。
使用canvas2d在微信小程序的开发者工具上表现为固定在屏幕上，不随容器滚动，但是手机表现正常。
记住： 在组件中获取实例需要使用in(this)。如 const ctx = uni.createCanvasContext('myCanvas',this) ，const query = uni.createSelectorQuery().in(this)

组件代码

<template>
  <div class="com-container">
    <canvas canvas-id="canvas" id="canvas" class="my-canvas" type="2d"></canvas>
  </div>
</template>

<script>
export default {
     
     
  props: {
     
     
    progress: {
     
     
      type: Number,
      default: 50
    },
    innerText: {
     
     
      type: String,
      default: '850'