& lthtml & gt
& lthead & gt
& lt/head & gt；
& lt身體？align="center " >
& lt畫布？id= "繪圖"？width="400 "？height="400 " >答？畫畫？的？什麽事！& lt/canvas & gt；
& lt劇本？type = " text/JavaScript " & gt；
//繪制餅圖
var？drawCircle？=?函數(canvasId，data_arr，？color_arr){
var？畫畫？=?document . getelementbyid(canvasId)；
if(drawing.getContext)？{
var？語境？=?drawing . get context(' 2d ')；
var？半徑？=?drawing.height/2?-20，//半徑
黃牛？=?半徑？+20,?oy？=?半徑？+20;//圓心
var？寬度？=?30,?身高？=?10,?//圖例寬度和高度
posX？=?黃牛？*?2?+20,?波西。=?30;//圖例位置
var？textX？=?posX？+?寬度？+?5,?短信？=?波西。+?10;//文本位置
var？startAngle？=?0,?endAngle？=?0;//開始和結束弧度
context.strokeStyle？=?紫色'；
上下文.線寬？=?3;
context.strokeRect(0，0,?繪圖.寬度，？drawing . height)；
for(var？i=0，？len=data_arr .長度；？我& ltlen？i++)？{
//繪制餅圖
endAngle？+=?data_arr[i]？*?2 *數學。PI；
context.fillStyle？=?color _ arr[I]；
context . begin path()；
context.moveTo(ox，oy)；
context.arc(ox，oy？半徑，？startAngle，？endAngle？假)；
context . close path()；
context . fill()；
startAngle？=?endAngle
}
}
};
var？初始化？=?函數(){
var？data_arr？=?[0.05,?0.25,?0.6,?0.1],
color_arr？=?['#00FF21 '，？#FFAA00 '，？#00AABB '，？# ff 4400 ']；
drawCircle('drawing '，？data_arr，？color _ arr)；
};
init()；
& lt/script & gt；
& lt/body & gt；
& lt/html & gt；