java 画饼图_[Java教程]小程序使用Canvas画饼图

[Java教程]小程序使用Canvas画饼图

0 2018-10-24 16:00:46

先上效果图

-------------------------------------------------------------w

-------------------------------------------------------------w

-------------------------------------------------------------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代码结束--------------------------------------------------------------------

本文网址：http://www.shaoqun.com/a/448389.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

小程序

0