canvas环形渐变（微信小程序）

最新推荐文章于 2023-12-06 13:13:17 发布

原创

最新推荐文章于 2023-12-06 13:13:17 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #javascript

该博客介绍了如何在微信小程序中使用canvas绘制圆环进度条。通过获取后端返回的数据，结合wx.createCanvasContext方法，设置了圆环的背景色、渐变色，并根据数据动态调整圆环的完成度。同时，提供了相应的样式布局，使得进度信息得以清晰展示。

这个例子是在微信小程序中写的
效果图
在这里插入图片描述
后端返回的数据格式，需要的只有otherInfo里面的数据

wxml

<view>
    <canvas class="progress_bg" canvas-id="{
  
  {otherInfo.bgid}}"> </canvas>
    <canvas class="progress_canvas" canvas-id="{
  
  {otherInfo.pgid}}"> </canvas>
</view>
<view class="progress_text">
    <text class='progress_info'> {
  
  {otherInfo.sumPointNumber || 0}}分</text>
</view>

data:{
   otherInfo: {
      bgid: "bgid",
      pgid: "pgid",
      sumPointNumber: 100   // 默认圆环显示的区域，全部显示是100
    }
}

根据接口获取数据，我只截取了需要的部分，赋值到data里面的otherInfo

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

花笙_

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

canvas画一个渐变色的环形进度环

qsya的博客

09-30

3827

» 介绍之前用canvas画了一个环形进度条，想要实现从0到100颜色渐变效果，现有的线性渐变和径向渐变都无法满足，找到一种思路，经供参考，先看效果：预览地址：https://codesandbox.io/s/charming-herschel-b3mk0 » 原理原理也很简单：把圆环分成n份，计算初始颜色到终止颜色中间n份颜色的值，每一份圆环一个颜色，从而达到渐变效果。 » 代码 <!DOCTYPE html> <html lang="en"> <head&gt

canvas 实现环形渐变进度条

shuaizi96的博客

04-20

2781

最近有个需求要做环形渐变色进度条，去网上找了半天没找到合适的，大多数渐变色都是径向渐变，所以自己用canvas写了个环形渐变的图：这个渐变其实就是把圆环分成许多小块分别绘制的，所以小块分的越多，渐变色越均匀，但是当圆环尺寸比较小的时候，边缘特别毛糙，需要适当减少份数，代码里是用unit 这个变量手动控制的，算是一个缺陷吧。代码在此： <!DOCTYPE html> <ht...

参与评论您还未登录，请先登录后发表或查看评论

canvas中绘制矩形、圆、渐变效果

01-03

这是html5中canvas的一个综合的例子，同时还有canvas的鼠标单击事件的监听代码

微信小程序canvas绘制渐变背景颜色，微信小程序canvas绘制背景颜色渐变

weixin_47756693的博客

06-14

1695

【代码】微信小程序canvas绘制渐变背景颜色，微信小程序canvas绘制背景颜色渐变。

canvas画圆环(一)之渐变色，纯色

Pedesis的博客

12-02

5678

通过canvas画可自定义颜色的圆环，可当进度进度条使用

精选资源

基于canvas 2D实现微信小程序自定义组件-环形进度条

06-11

在微信小程序中，我们可以通过`wx.createSelectorQuery()`获取到canvas元素，并调用`select()`方法选择它，然后通过`exec()`执行相关操作，获取到`getContext('2d')`对象。接下来，我们创建环形进度条组件的结构。...

【微信小程序开发（六）】绘制音乐播放器环形进度条

谁说学美术将来只能卖画了，我也有自己的梦想。

07-27

2099

需要开发类似于网易云播放器的功能，这里主要讲解环形进度条的问题。

微信小程序：环形进度条模块

蓝色是天的博客

08-12

1608

1、在根目录创建名为components的文件夹，用来放需要引用的自定义组件。最近开发一款背单词的微信小程序，计划使用环形进度条展示每日背单词进度。2、创建名为circle的文件夹，用来放环形进度条自定义组件。利用canvas实现微信小程序环形进度条模块。3、代码拷贝到对应目录下即可正常使用。

微信小程序-环形图（带动画）

sunzhibin的博客

03-17

2281

效果图思路使用一个canvas绘制（带动画）；通过画弧线，设置线宽，来实现圆环效果；计算每段圆弧的起始角度和终止角度，用递归做动画；绘制完第一段圆弧块–>再绘制下一块，下一块的起始角度是上一块结束的角度+间隙（中间的白色分割线）；当最后一段圆弧块绘制完成时，绘制延伸线+文字；如下图，通过三角函数确定延伸点A点位置，判断延伸点位于中心点的左或右，绘制延伸线；确定A点坐标：已知A点到圆心的长度edge = 半径r + 伸出去点的长度； let edgeX = Math.cos(st

canvas绘制环形渐变进度条

xiaoyuermino的博客

04-01

536

效果图： html: js： var c = document.getElementById(‘canvas’), canvas = 30, ctx = c.getContext(‘2d’); // 画外面的圆 ctx.beginPath(); ctx.arc(71, 71, 65, 0, Math.PI*2); ctx.closePath(); ctx.strokeStyle = 'rgba(255,255,255,0.1)'; ctx.stroke(); // 画里面

使用html5 canvas绘制圆环动效

12-14

最近笔者有个需求，需求内容为：一组文字显示在圆环的周围，用户可添加文字，文字围绕着圆环，每个词对应圆环周围的的蓝色小圆点，当用户鼠标放在圆环上方小蓝点时时，实现放射出三角形，再显示出文字，先看看动图效果吧！如上图所示，当鼠标放在对应蓝色小圆点上时，需要放射出射类似三角形的射线，并在三角形外侧显示对应文字，且小蓝点变小白点。当用户在上方输入内容后，将内容添加至下方的圆环周围。如上图所示。笔者本来一开始的想法是使用css来实现，就像下图的动态二级菜单一样。但是考虑到圆环边缘的内容可变，又要定位到圆环周围，css可能会比较难实现。所以哇，笔者决定使用canvas

使用canvas绘制环形渐变色进度条

Roger的博客

11-27

2439

效果大约是上边的样子。源码地址https://github.com/Ajingjing006/CircleProgress

Canvas 圆形渐变

实践求真知

04-12

5269

一介绍渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下是设置Canvas圆形渐变的方法： createRadialGradient(x,y,r,x1,y1,r1) - 创建一个圆形渐变。当我们使用渐变对象，必须使用两种或两种以上的停止颜色。 addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1. 使用渐变，设置fi

用Canvas画带动画的渐变数字圆环

小小码农

04-13

8688

先放效果图这是一个自定义view，布局就是一个简单的线性布局而已，通过addview的方式，将自定义view显示出来；渐变圆以及外圈圆、外圈小圆是自定义view，其他三个文字是Textview；github的地址： https://github.com/Hebin320/ArcChart布局代码： <LinearLayout android:id="@

Canvas实现2D地图飞线的渐变效果

weixin_42183524的博客

08-04

1182

思路使用canvas quadraticCruveTo 创建贝塞尔曲线 requestAnimationFrame 制作动画重绘的时候，改变曲线渐变的位置，形成动画效果代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"

一个基于react中的canvas渐变效果的圆环

weixin_44481662的博客

06-03

871

import React, { Component } from 'react'; import './index.scss'; class Home extends Component { constructor(props) { super(props) } initCanvas() { const { x0...

vue实现canvas画布上动态画一个渐变圆环

m0_61339009的博客

03-29

1137

这是我自己的一些理解和方法，按这个demo可以自己理解并且完成一些简单的绘画。画布上一个环形的渐变简单动画。从中理解画布的原理和使用方法。

canvas实现渐变的圆

qq_45290368的博客

12-06

883

绘制多个圆，颜色依次呈现渐变

微信小程序自定义圆弧背景

苏苏就是小苏苏的博客

08-03

1898

1.实现效果 2.实现原理方法一：设置伪元素after，根据需要的弧度，设置圆的宽度。圆的高度越高，幅度越大。方法二：利用margin-left和margin-top将一个完整的圆移出去相应的位置。本文采用的是方法一！ 3.完整代码（更多小程序代码请移步码云） https://gitee.com/susuhhhhhh/wxmini_demo 4.部分代码 .head_top{ width: 100%; height: 100rpx; position: relative; z-ind

微信小程序环形进度条自定义组件开发指南

基于 canvas 2D 实现微信小程序自定义组件-环形进度条时，开发者首先需要了解微信小程序中自定义组件的开发流程。这通常包括创建自定义组件的文件夹和文件，如 JSON 配置文件、WXML 模板文件、WXSS 样式文件和 JS ...