다음은 호출 가능한 함수를 사용하여 호를 그리는 시작 예제입니다.
시작 및 끝 호 각도는 Radians
입니다. 다음과 같이 각도를 라디안으로 변환 할 수 있습니다.radians = degrees * Math.PI/180
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
ctx.lineWidth = 2;
ctx.font = '14px verdana';
var PI2 = Math.PI * 2;
var myColor = ["Green", "Red", "Blue"];
var myData = [30, 15, 38, 22, 30, 20, 10];
var cx = 150;
var cy = 150;
var radius = 100;
ctx.globalAlpha=0.50;
pieChart(myData, myColor);
ctx.globalAlpha=1.00;
function pieChart(data, colors){
// calc data total
var total = 0;
for (var i = 0; i < data.length; i++) {
total += data[i];
}
// calc sweep angles for each piece of pie
var sweeps = []
for (var i = 0; i < data.length; i++) {
sweeps.push(data[i] / total * PI2);
}
// draw outer pie
var accumAngle = 0;
for (var i = 0; i < sweeps.length; i++) {
var f=randomColor();
drawWedge(radius, accumAngle, accumAngle + sweeps[i], f, data[i]);
accumAngle += sweeps[i];
}
// draw inner percent-complete wedges
var accumAngle = 0;
for (var i = 0; i < sweeps.length; i++) {
var r=radius*(Math.random()*70+20)/100;
var f=randomColor();
drawWedge(r,accumAngle, accumAngle + sweeps[i], f, data[i]);
accumAngle += sweeps[i];
}
}
function drawWedge(radius, startAngle, endAngle, fill, label) {
// draw the wedge
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.arc(cx, cy, radius, startAngle, endAngle, false);
ctx.closePath();
ctx.fillStyle = fill;
ctx.strokeStyle = 'white';
ctx.fill();
ctx.stroke();
}
function randomColor(){
return('#'+(Math.floor(Math.random() * 0x1000000) + 0x1000000).toString(16).substr(1));
}
body{ background-color: ivory; }
#canvas{border:1px solid red; }
<canvas id="canvas" width=512 height=512></canvas>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다