微信小程序画布圆形进度条显示效果
本文实例为大家分享了微信小程序画布圆形进度条展示的具体代码,供大家参考,具体内容如下
效果图:
代码:
wxml
<!--pages/test/test.wxml--> <canvas style="width: 300px; height: 200px;" canvas-id="canvasid"></canvas>
js
// pages/test/test.js var context = new wx.createCanvasContext('canvasid', this); var strat_num = 1, end_num = 20; var sAngle = 1.5 * Math.PI, eAngle = 0; Page({ onReady: function () { this.canvas() }, canvas:function(){ var that=this; if (strat_num <= end_num){ console.log('strat_num:', strat_num) eAngle = strat_num * 2 * Math.PI / end_num + 1.5 * Math.PI; setTimeout(function () { context.setStrokeStyle("#00ff00") context.setLineWidth(2) context.fillText(strat_num * 5 <= 100?strat_num * 5:100, 95, 95) context.arc(100, 100, 60, sAngle, eAngle, false) context.stroke() context.draw() that.canvas() strat_num++ },200) } else { console.log('strat_num_end:', strat_num) } } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
微信小程序实现下载进度条的方法
我们经常会在APP下载中看到下载进度条,这个进度条是为了和用户交互,告知用户当前的进度,不然让用户一直处于等待,用户等超过1分钟就会崩溃的,今天代码君就教大家如何在小程序中也制作下载进度条 progress进度条是微信小程序的组件,和HTML5的进度条progress类似. progress属性介绍 属性名 作用 参数值 percent 进度百分比0~100 show-info 在进度条右侧显示百分比 true/false 默认false active 进度条从左往右的动画 true/false
-
微信小程序自定义音乐进度条的实例代码
需求:显示音乐播放按钮.可手动拖拽进度条:页面中含多个音乐,播放当前音乐时暂停其他音乐播放. 小程序自带标签 audio 小程序自带的audio标签含固定的样式,且有最小尺寸.目前项目也不含name和author字段,所以放弃audio标签. 实现效果图 初始化音乐数据 <text>{{currentProcess}}</text> <slider bindchange="" bindtouchstart="" bindtouchend
-
详解微信小程序——自定义圆形进度条
微信小程序 自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: Page({ data: {}, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 }, onReady: function () { // 页面渲染完成 var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文con
-
微信小程序之圆形进度条实现思路
需求概要 小程序中使用圆形倒计时,效果图: 思路 使用2个canvas 一个是背景圆环,一个是彩色圆环. 使用setInterval让彩色圆环逐步绘制. 解决方案 第一步先写结构 一个盒子包裹2个canvas以及文字盒子: 盒子使用相对定位作为父级,flex布局,设置居中: 一个canvas,使用绝对定位作为背景,canvas-id="canvasProgressbg" 另一个canvas,使用相对定位作为进度条,canvas-id="canvasProgress"
-
微信小程序实现圆形进度条动画
本文实例为大家分享了微信小程序动画之圆形进度条,供大家参考,具体内容如下 上图: 代码: js: //获取应用实例 var app = getApp() var interval; var varName; var ctx = wx.createCanvasContext('canvasArcCir'); Page({ data: { }, drawCircle: function () { clearInterval(varName); function drawArc(s, e) { ctx
-
微信小程序自定义组件实现环形进度条
本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下 微信小程序自定义组件官方教程 环形进度条的组件已经放在github上 环形进度条效果图 创建步骤 1.在根目录创建名为components的文件夹,用来放需要引用的自定义组件. 2.创建名为canvas-ring的文件夹,用来放环形进度条自定义组件. 3.鼠标指着canvas-ring的文件夹 鼠标右键 "新建 Component" 取名canvas-ring. 结构图: 环形进度条组件的代码 canva
-
微信小程序实现实时圆形进度条的方法示例
前言 最近工作中为了做一个录制按钮,研究了下小程序的实时圆形进度条实现,下面这篇文章就来给大家详细的介绍了实现的方法示例,废话不多说,先来看看效果图吧. 效果图如下 初始状态 点击中间按钮开始绘制 绘制过程 绘制结束 实现思路 建立两个canvas标签,先绘制底层的浅灰色圆圈背景,再绘制上层的红色进度条. WXML代码 <view class="wrap"> <view class="circle-box"> <canvas class
-
微信小程序多音频播放进度条问题
真的脑子疼,小程序的音频组件居然没有进度控制的功能,网上的方法又很少,逻辑通了就好写了. 1.所有音频播放.停止按钮使用状态切换控制 2.当点击某个音频播放时,首先将所有音频的状态置为停止状态,然后将当前音频置为播放状态 3.滚动条插件配合音频控件一起使用 4.播放状态时滚动条的长度随音频进度变化而变化,时间也要显示 5.拖动滚动条时,音频的当前时间随滚动条变化而变化 1.wxml <text class="left_text">{{item.currentProcess}
-
微信小程序实现时间进度条功能
关于答题类,或者一些游戏环节的小程序需要用到时间进度条,该功能怎么实现?看下面源码 <view class='out' style='margin-top:10px'> <view class='in' style='width:{{progressWidth}}%'></view> </view> <view class='caozuo'> <text>{{progressTime}}秒</text> <text
-
微信小程序画布圆形进度条显示效果
本文实例为大家分享了微信小程序画布圆形进度条展示的具体代码,供大家参考,具体内容如下 效果图: 代码: wxml <!--pages/test/test.wxml--> <canvas style="width: 300px; height: 200px;" canvas-id="canvasid"></canvas> js // pages/test/test.js var context = new wx.createCanv
-
微信小程序实现圆心进度条
本文实例为大家分享了微信小程序实现圆心进度条的具体代码,供大家参考,具体内容如下 一.创建项目结构 打开微信开发者工具创建一个项目, 新建 与 pages 同级目录 components,在 components 中新建一个目录 circle ,circle 中新建 Component 命名为 circle,此时将自动生成 json.wxml.wxss.js 4 个文件.结构如下: 二.编写组件 首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true,可将这一
-
小程序自定义圆形进度条
本文实例为大家分享了小程序自定义圆形进度条的具体代码,供大家参考,具体内容如下 circle.wxss: page { width: 100%; height: 100%; background-color: #fff; } .circle-box { text-align: center; margin-top: 10vw; } .circle { position: absolute; left: 0; right: 0; margin: auto; } .draw_btn { width:
-
微信小程序实现环形进度条
本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下 index.wxss .circle { position: absolute; left: 0; right: 0; margin: auto; } index.wxml <canvas class="circle" style="z-index: 1;" canvas-id="canvasArcCir"></canvas>
随机推荐
- AngularJS身份验证的方法
- 基于ORA-12170 TNS 连接超时解决办法详解
- IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
- Python多线程编程(三):threading.Thread类的重要函数和方法
- Javascript 判断Flash是否加载完成的代码
- linux下使用Apache+php实现留言板功能的网站
- 基于Jquery的开发个代阴影的对话框效果代码
- 非常不错的页面特效 建议大家看下
- JavaScript 不只是脚本
- 使用JavaScript刷新网页的方法
- 模仿动画的放大缩小容器
- PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
- c#创建Graphics对象的三种方法
- java基于jcifs.smb实现远程发送文件到服务器
- kaptcha验证码使用方法详解
- js实现图片局部放大效果详解
- Android实现简单C/S聊天室应用
- Android实现C/S聊天室
- JS数组扁平化(flat)方法总结详解
- 你或许不知道的一些npm实用技巧