这里将介绍下微信小程序开发之画布canvas 饼状图

上代码:1.js

Page( {

1. onReady: function() {
2. // 页面渲染完成
3. //使用wx.createContext获取绘图上下文context
4. var context = wx.createContext();
5. // 画饼图
6. // 数据源
7. var array = [ 20, 30, 40, 50 ];
8. var colors = [ “#ff0000”, “#ffff00”, “#0000ff”, “#00ff00” ];
9. var total = 0;
10. // 计算总量
11. for( var index = 0;index < array.length;index++ ) {
12. total += array[ index ];
13. }
14. // 定义圆心坐标
15. var point = { x: 100, y: 100 };
16. // 定义半径大小
17. var radius = 60;
18. /* 循环遍历所有的pie */
19. for( var i = 0;i < array.length;i++ ) {
20. context.beginPath();
21. // 起点弧度
22. var start = 0;
23. if( i > 0 ) {
24. // 计算开始弧度是前几项的总和，即从之前的基础的上继续作画
25. for( var j = 0;j < i;j++ ) {
26. start += array[ j ] / total * 2 * Math.PI;
27. }
28. }
29. console.log( “i:” + i );
30. console.log( “start:” + start );
31. // 1.先做第一个pie
32. // 2.画一条弧，并填充成三角饼pie，前2个参数确定圆心，第3参数为半径，第4参数起始旋转弧度数，第5参数本次扫过的弧度数，第6个参数为时针方向-false为顺时针
33. context.arc( point.x, point.y, radius, start, array[ i ] / total * 2 * Math.PI, false );
34. // 3.连线回圆心
35. context.lineTo( point.x, point.y );
36. // 4.填充样式
37. context.setFillStyle( colors[ i ] );
38. // 5.填充动作
39. context.fill();
40. context.closePath();
41. }
42. //调用wx.drawCanvas，通过canvasId指定在哪张画布上绘制，通过actions指定绘制行为
43. wx.drawCanvas( {
44. //指定canvasId,canvas 组件的唯一标识符
45. canvasId: ‘mypie’,
46. actions: context.getActions()
47. });
48. }
    50.})

2..wxml

2.

注意:

先说说canvas:

1.微信里面canvas标签默认宽度300px、高度225px,可自行修改.

2.同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，

该 canvas 标签对应的画布将被隐藏并不再正常工作;