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


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 相关文章推荐
List the Codec Files on a Computer
Jun 18 Javascript
jQuery的三种$()
Dec 30 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
微信小程序获取当前位置和城市名
Nov 13 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
python从ftp下载数据保存实例
2013/11/20 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
巴西女装购物网站:Eclectic
2018/04/24 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
农行实习自我鉴定
2013/09/22 职场文书
优秀小学生家长评语
2014/01/30 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
股东协议书范本2016
2016/03/21 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android