小程序使用Canvas畫餅圖

2018-10-24

0

先上效果圖

-------------------------------------------------------------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代碼結束--------------------------------------------------------------------

0

*特別聲明：以上內容來自于網絡收集，著作權屬原作者所有，如有侵權，請聯系我們：admin@shaoqun.com。

總結

以上是生活随笔為你收集整理的关于星空的java小程序_[Java教程]小程序使用Canvas画饼图_星空网的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。