微信小程序canvas实现环形渐变

本文实例为大家分享了微信小程序canvas实现环形渐变的具体代码，供大家参考，具体内容如下

这个例子是在微信小程序中写的

效果图

后端返回的数据格式，需要的只有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>

js

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

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

下面是重要的canvas部分
用arc()方法创建圆，起始角设置为 0，结束角设置为 2*Math.PI（PI就是圆周率π，PI是弧度制的π,也就是180°，所以，Math.PI = 3.14 = 180°，PI是一个浮小数）

drawProgressbg() {
    let w = wx.getSystemInfoSync().screenWidth;
    let that = this;
    let ctx = wx.createCanvasContext(that.data.otherInfo.bgid)
    ctx.setLineWidth(8 * w / 375);
    ctx.setStrokeStyle('#DDEDFA');
    ctx.setLineCap('round');
    ctx.beginPath();
    ctx.arc(80 * w / 375, 80 * w / 375, 65 * w / 375, 0, 2 * Math.PI, false);
    ctx.stroke();
    ctx.draw();
  },
  drawCircle() {
    let w = wx.getSystemInfoSync().screenWidth;
    let that = this;
    let context = wx.createCanvasContext(that.data.otherInfo.pgid);
    context.setLineWidth(8 * w / 375);
    // context.setStrokeStyle('#55A5E6');    不渐变的背景色
    // 环形渐变的背景色
    var my_gradient = context.createLinearGradient(0, 0, 200, 0);
    my_gradient.addColorStop(1, "#FA6400");
    my_gradient.addColorStop(0, "#FFECAF");
    context.strokeStyle = my_gradient;
    context.setLineCap('round');
    context.beginPath();
    context.arc(80 * w / 375, 80 * w / 375, 65 * w / 375, -Math.PI / 2, that.data.otherInfo.sumPointNumber / 50 * Math.PI - Math.PI / 2, false);
    context.stroke();
    context.draw()
  },
  onLoad: function (options) {
    this.getList()   // 获取的数据
    this.drawProgressbg();
    this.drawCircle()
  },

wxss

.progress_bg {
  position: absolute;
  left: 30%;
  width: 300rpx;
  height: 300rpx;
  z-index: 9;
}
.progress_canvas {
  left: 30%;
  width: 300rpx;
  height: 300rpx;
  z-index: 9;
}
.progress_text {
  display: flex; 
  align-items: center;
 justify-content: center;
 margin-top: -23%;
}
.progress_info {
  letter-spacing: 2rpx;
  color: #000;
  font-weight: 600;
  font-size: 38rpx;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序基于canvas渐变实现的彩虹效果示例

    微信小程序基于canvas渐变实现的彩虹效果示例

    本文实例讲述了微信小程序基于canvas渐变实现的彩虹效果.分享给大家供大家参考,具体如下: 微信小程序提供了两种渐变的方式: createLinearGradient(x,y,x1,y1)创建一个线性的渐变. x,y           起点坐标 x1,y1        终点坐标 createCircularGradient(x,y,r)创建一个从圆心开始的渐变. x,y            圆心坐标 r                 半径 创建了渐变对象之后,必须添加两个或者两个以上的

  • 微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)

    微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)

    本文实例讲述了微信小程序MUI导航栏透明渐变功能.分享给大家供大家参考,具体如下: 导航栏透明渐变效果 实现原理 1. 给page-group设置的背景颜色采用rgba; 2. 通过改变rgba其中a的值来实现透明渐变. WXML <view style="height:100%;position:fixed;width:100%;"> <scroll-view scroll-y="false" bindscroll="scroll&qu

  • 微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)

    微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)

    本文实例讲述了微信小程序MUI导航栏透明渐变功能.分享给大家供大家参考,具体如下: 导航栏透明渐变效果 实现原理 1. 利用position:absolute在导航下定位一个view作为背景渐变使用; 2. 通过改变改view的opacity来实现透明渐变. WXML <!--pages/scroll/scroll.wxml--> <view style="height:100%;position:fixed;width:100%;"> <scroll-v

  • 微信小程序canvas实现环形渐变

    微信小程序canvas实现环形渐变

    本文实例为大家分享了微信小程序canvas实现环形渐变的具体代码,供大家参考,具体内容如下 这个例子是在微信小程序中写的 效果图 后端返回的数据格式,需要的只有otherInfo里面的数据 wxml <view>     <canvas class="progress_bg" canvas-id="{{otherInfo.bgid}}"> </canvas>     <canvas class="progress_

  • 微信小程序canvas写字板效果及实例

    微信小程序canvas写字板效果及实例

    微信小程序canvas写字板效果及实例 写字板效果:书写文字,画板重置,导出图片,导出图片前判断是否书写内容 app.json: 添加一个路由:"pages/canvas/canvas" { "pages":[ "pages/index/index", "pages/logs/logs", "pages/canvas/canvas" ], "window":{ "navigat

  • 微信小程序 Canvas增强组件实例详解及源码分享

    微信小程序 Canvas增强组件实例详解及源码分享

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; height: 600px;" canvas-id="line-canvas-1">canvas> JS: var wezrender = require('../../lib/wezrender'); zr = wezrender.zrender.init("

  • 详解微信小程序-canvas绘制文字实现自动换行

    详解微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用省略号表示,光靠这个API是无法完成的.下面本人就讲下我在开发中是如何解决这个问题的. 1 wxml代码 <canvas canvas-id="myCanvas" style="border: 1px solid;"/> 2 w

  • 微信小程序canvas拖拽、截图组件功能

    微信小程序canvas拖拽、截图组件功能

    先看下微信小程序canvas拖拽功能 组件地址 github.com/jasondu/wx-- readme近期补上 实现效果 如何实现 使用canvas 使用movable-view标签 由于movable-view无法实现旋转,所以选择使用canvas 需要解决的问题 如何将多个元素渲染到canvas上 如何知道手指在元素上.如果多个元素重叠如何知道哪个元素在最上层 如何实现拖拽元素 如何缩放.旋转.删除元素 看起来挺简单的嘛,就把上面这几个问题解决了,就可以实现功能了:接下来我们一一解决.

  • 微信小程序canvas分享海报功能

    微信小程序canvas分享海报功能

    微信小程序canvas分享海报,包含拒绝授权后重新打开授权设置. 这篇文章完善了第一次拒绝授权后再次点击可以打开授权设置,希望可以帮助到爱学习的道友 这里是效果图,图片可以百度上找. 话不多说,直接上代码 最重要的一点,千万不要忘记在json文件里面注册组件和wxml里面引用组件 wxml <button class='btn' catchtap='createPoster' >生成海报</button> <my-poster id="getPoster"

  • 详解微信小程序canvas圆角矩形的绘制的方法

    微信小程序允许对普通元素通过 border-radius 的设置来进行圆角的绘制,但有时候在使用 canvas 绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方法就是使用 canvas 将这块区域绘制出来,最后导出 canvas 即可,但是 canvas 没有直接提供圆角的绘制 api ,所以需要 曲线救国 圆角矩形与一般矩形的区别在于,前者的四个角都是圆弧,所以只需要将一般矩形的四个角切掉,换成圆弧即可,如下图就是一个一般矩形被切掉了四个角的样子: 很明

  • 微信小程序canvas截取任意形状的实现代码

    微信小程序canvas截取任意形状的实现代码

    最近在研究拼图验证码实现,需要对图片的部分模块进行特殊形状切割出一小块,明白后原来是如此简单,第一步就是将所有绘制的形状用线勾出(直线.弧线.贝塞尔曲线都可以)形成闭环,第二步就是切割绘制,第二步不麻烦,麻烦的只是第一步,需要一些计算,所以会在以后,尽力的多保存一些特殊形状的方法. 比如: 代码 drawPic(x,y,r){ // const ctxBackground = wx.createCanvasContext('canvasBackground') const ctxBackgrou

  • 微信小程序canvas开发水果老虎机的思路详解

    在这个超长假期中,无聊...,所以动手做一个早就计划要做的小玩意, 水果老虎机 ,嗯,这是一个小程序而不是小游戏... 使用结构还是canvas? 使用模板结构(view)生成水果盘的好处一是用户可自定义产出 n x n 的定制化老虎机,二是容易通过算法样式生成布局,三是通过 wx.selectQueryAll 的方法能够很方便的抓到定位数据.但,问题是动画性能过于孱弱,如图构建一个 7x7 的水果盘,动画性能估计会惨不忍睹,而且纯粹模板结构无论使用 animation 动画方法还是 css 的

  • 微信小程序canvas动态时钟

    本文实例为大家分享了微信小程序canvas动态时钟的具体代码,供大家参考,具体内容如下 canvas时钟效果图: 代码: wxml: <view style='width:100%;height:{{canvasHeight}}px' catchtap='goCountdown'catchlongtap='touchstart' catchtouchend='touchend'> <canvas canvas-id='clock' style='width:100%;height:{{c

随机推荐