小程序使用Canvas画饼图

2018-10-24 08:42:24来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

先上效果图

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

<view class="canvas-content">
<canvas canvas-id="Canvas" style="width: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代码结束--------------------------------------------------------------------

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:五大浏览器内核介绍

下一篇:js获取地址栏中的数据