溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)怎么在JavaScript中使用canvas動(dòng)態(tài)繪制餅圖，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net canvas餅狀圖</title>
</head>
<body>
<canvas id="canvas" width="800" height="600" ></canvas>
</body>
<script>
var colors = (function () {
return ( "aliceblue,antiquewhite,aqua,aquamarine,azure,beige,bisque,black,blanchedalmond,blue," +
"blueviolet,brown,burlywood,cadetblue,chartreuse,chocolate,coral,cornflowerblue,cornsilk," +
"crimson,cyan,darkblue,darkcyan,darkgoldenrod,darkgray,darkgreen,darkgrey,darkkhaki,darkmagenta," +
"darkolivegreen,darkorange,darkorchid,darkred,darksalmon,darkseagreen,darkslateblue,darkslategray," +
"darkslategrey,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dimgrey,dodgerblue,firebrick," +
"floralwhite,forestgreen,fuchsia,gainsboro,ghostwhite,gold,goldenrod,gray,green,greenyellow,grey," +
"honeydew,hotpink,indianred,indigo,ivory,khaki,lavender,lavenderblush,lawngreen,lemonchiffon," +
"lightblue,lightcoral,lightcyan,lightgoldenrodyellow,lightgray,lightgreen,lightgrey,lightpink," +
"lightsalmon,lightseagreen,lightskyblue,lightslategray,lightslategrey,lightsteelblue,lightyellow," +
"lime,limegreen,linen,magenta,maroon,mediumaquamarine,mediumblue,mediumorchid,mediumpurple," +
"mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue," +
"mintcream,mistyrose,moccasin,navajowhite,navy,oldlace,olive,olivedrab,orange,orangered,orchid," +
"palegoldenrod,palegreen,paleturquoise,palevioletred,papayawhip,peachpuff,peru,pink,plum,powderblue," +
"purple,rebeccapurple,red,rosybrown,royalblue,saddlebrown,salmon,sandybrown,seagreen,seashell,sienna," +
"silver,skyblue,slateblue,slategray,slategrey,snow,springgreen,steelblue,tan,teal,thistle,transparent," +
"tomato,turquoise,violet,wheat,white,whitesmoke,yellow,yellowgreen" ).split(',');
})();
function Bing(obj) {
this.start = 0;
for(var key in obj){
this[key] = obj[key];
}
this.init();
}
Bing.prototype = {
init: function () {
this.handle();
this.render(this.data2);
this.drawText();
},
/**
* 渲染頁(yè)面
* @param obj
* @param i
*/
render: function (obj) {
//3、計(jì)算每一個(gè)扇形的起始弧度和結(jié)束弧度
this.data2.forEach(function (v, i) {
var obj = {};
//第一個(gè)扇形的起始弧度：start 結(jié)束：start+第一個(gè)扇形占據(jù)的弧度差
obj.start = this.start;
obj.end = this.start + v.radian;
this.start += v.radian;
//繪制扇形
this.ctx.beginPath();
this.ctx.moveTo(300, 300);
this.ctx.arc(300, 300, 150, obj.start, obj.end);
this.ctx.fillStyle = colors[i * 15];
this.ctx.fill();
}, this);
},
/**
* 處理數(shù)據(jù)
*/
handle:function(){
var sum = 0;
this.data.forEach(function (v) {
sum += v;
});
//2、計(jì)算每一個(gè)數(shù)據(jù)所占的比重
this.data2 = this.data.map(function (v) {
var obj = {};
obj.number = v;
obj.ratio = v / sum;//每個(gè)數(shù)據(jù)占據(jù)的比重
obj.radian = 2 * Math.PI * v / sum;//該扇形所占據(jù)的弧度
obj.start = this.start;
obj.end = this.start + obj.radian;
this.start = obj.end;
return obj;
},this);
},
drawText:function(){
this.ctx.font = "30px 微軟雅黑";
this.ctx.fillStyle = 'red';
this.data2.forEach(function(obj){
//計(jì)算文字所在的弧度
r2 = obj.start + obj.radian/2;
//就按相對(duì)于圓心文字偏移的位置
b = this.r*Math.cos(r2);
h = this.r*Math.sin(r2);
//文字的位置
var x2 = this.x + b;
var y2 = this.y + h;
this.ctx.fillText(obj.number,x2,y2);
},this);
}
};
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var data = [1, 3, 5, 7, 9];
var bing = new Bing({
ctx:ctx,
x:300,
y:300,
r:150,
data:data
});
</script>
</html>上述就是小編為大家分享的怎么在JavaScript中使用canvas動(dòng)態(tài)繪制餅圖了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼