zoukankan      html  css  js  c++  java
  • 小程序使用Canvas画饼图

    先上效果图

    -------------------------------------------------------------wxml代码开始---------------------------------------------------------------

    <view class="canvas-content">
    <canvas canvas-id="Canvas" style="100%;height:360px;"></canvas>
    </view>

    -------------------------------------------------------------wxml代码结束---------------------------------------------------------------

    -------------------------------------------------------------js代码开始--------------------------------------------------------------------

    Page({
    data: {

    },
    onLoad: function () {
    var context = wx.createCanvasContext('Canvas', this);
    var array = [20, 50, 60,80];
    var colors = ["#228B22","pink", "#008B8B", "#ADFF2F"];
    var total = 0;
    for (var val = 0; val < array.length; val++) {
    total += array[val];
    }
    var point = { x: 160, y: 120 };
    var radius = 100;
    for (var i = 0; i < array.length; i++) {
    context.beginPath();
    var start = 0;
    if (i > 0) {
    for (var j = 0; j < i; j++) {
    start += array[j] / total * 2 * Math.PI;
    }
    }
    var end = start + array[i] / total * 2 * Math.PI;
    context.arc(point.x, point.y, radius, start, end);
    context.setLineWidth(2)
    context.lineTo(point.x, point.y);
    context.setStrokeStyle('#F5F5F5');
    context.setFillStyle(colors[i]);
    context.fill();
    context.closePath();
    context.stroke();
    }
    context.draw();
    }
    })

    -------------------------------------------------------------js代码结束--------------------------------------------------------------------

  • 相关阅读:
    尺取法 C
    并查集
    欧拉路与欧拉回路
    C
    最大连续区间和算法总结
    C
    python中的random函数方法
    Python可视化
    MFC学习之模态对话框和非模态对话框
    dropna
  • 原文地址:https://www.cnblogs.com/zengyanju/p/9837467.html
Copyright © 2011-2022 走看看