微信小程序 绘图之饼图实现


Posted in Javascript onOctober 24, 2016

微信小程序的推出,无疑将会在移动互联网行业里再次掀起风浪。有人会质疑小程序会不会火, 会不会火我不知道, 看微信的用户量即可明白一切。这里就先学习下微信小程序绘图的功能实现。

微信小程序 绘图之饼图实现

官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-canvas.html

思路是先画第一段弧,然后连线回圆心,关闭路径,注意不需要连线到起始位,用fill()自动闭合到起始点,对照Photoshop里路径转选区的做法可以有助于理解;第二段弧以前一段弧为起始角度,再回圆心,最后关闭路径;第三段弧以前两段弧之和为起始角度,扫过相应比重的弧度;以此类推,完成整圆。

微信小程序 绘图之饼图实现

布局文件

<canvas canvas-id="canvas2" style="width:200px;height:200px;border:1px solid #ccc;margin-top:100px;"></canvas>

Javascript文件

Page({
 onReady:function(){
  // 页面渲染完成
  // 创建上下文
  var context = wx.createContext();
// 画饼图
//  数据源
  var array = [20, 30, 40, 40];
  var colors = ["#ff0000", "#ffff00", "#0000ff", "#00ff00"];
  var total = 0;
//  计算问题
  for (index = 0; index < array.length; index++) {
    total += array[index];
  }
//  定义圆心坐标
  var point = {x: 100, y: 100};
//  定义半径大小
  var radius = 60;

/*  循环遍历所有的pie */
  for (i = 0; i < array.length; i++) {
    context.beginPath();
//    起点弧度
    var start = 0;
    if (i > 0) {
//      计算开始弧度是前几项的总和,即从之前的基础的上继续作画
      for (j = 0; j < i; j++) {
        start += array[j] / total * 2 * Math.PI; 
      }
    }
    console.log("i:" + i);
    console.log("start:" + start);
//   1.先做第一个pie
//    2.画一条弧,并填充成三角饼pie,前2个参数确定圆心,第3参数为半径,第4参数起始旋转弧度数,第5参数本次扫过的弧度数,第6个参数为时针方向-false为顺时针
   context.arc(point.x, point.y, radius, start, array[i] / total * 2 * Math.PI, false);
//   3.连线回圆心
   context.lineTo(point.x, point.y);
//   4.填充样式
   context.setFillStyle(colors[i]);
//   5.填充动作
   context.fill();
   context.closePath();
  }

  wx.drawCanvas({
    canvasId: 'canvas2',
    actions: context.getActions()
  });
 }
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery 工具函数学习资料
Apr 29 Javascript
Jquery 动态添加按钮实现代码
May 06 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 #Javascript
微信小程序 富文本转文本实例详解
Oct 24 #Javascript
微信小程序 参数传递详解
Oct 24 #Javascript
10分钟掌握XML、JSON及其解析
Dec 06 #Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 #Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 #Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 #Javascript
You might like
德劲1104的电路分析与改良
2021/03/01 无线电
php防注
2007/01/15 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
web页面数据展示新想法(json)
2010/06/08 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
AngularJS基础知识
2014/12/21 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
scrapy爬虫实例分享
2017/12/28 Python
python实现爬取图书封面
2018/07/05 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
python提取xml里面的链接源码详解
2019/10/15 Python
Django中的AutoField字段使用
2020/05/18 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
如何通过python计算圆周率PI
2020/11/11 Python
应届生.NET方向面试题
2015/05/23 面试题
大学同学聚会邀请函
2014/01/29 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
初中英语教学反思范文
2016/02/15 职场文书
mysql主从复制的实现步骤
2021/10/24 MySQL
python实现双链表
2022/05/25 Python