利用canvas進行一個餅形圖的繪製
阿新 • • 發佈：2019-02-06
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>繪製餅形圖。</title>
<style>
canvas{
border: 1px solid green;
}
</style>
</head>
<body>
<!-- 繪製餅形圖 -->
<canvas width="500" height="500" id="canvas"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function toAngle(radian){
return radian*180/Math.PI;
}
function toRadian(angle){
return angle*Math.PI/180;
}
/*將餅狀圖畫出來*/
var colors = 'green,yellow,pink,blue,red,lightgreen,lightblue'.split(',');
var text = 'HTML5,Canvas,Javascript,Css3,Ajax,框架封裝,jQuery與移動Web'.split(',');
var x0 = canvas.width/2,
y0 = canvas.height/2,
radius = 100,
start = -5,
distance = 20,
padding = 5,
step = 360/colors.length;
for(var i = 0 ; i < colors.length ; i ++){
ctx.beginPath();
ctx.fillStyle = colors[i];
ctx.moveTo(x0,y0);
ctx.arc(x0,y0,radius,toRadian(start),toRadian(start+=step));
ctx.fill();
/*畫斜線*/
ctx.beginPath();
ctx.strokeStyle = colors[i];
var x1 = x0 + (radius+distance)*Math.cos(toRadian(( start-step/2 ))),
y1 = y0 + (radius+distance)*Math.sin(toRadian(( start-step/2 )));
ctx.moveTo(x0,y0);
ctx.lineTo(x1,y1);
ctx.stroke();
/*寫文字*/
ctx.beginPath();
ctx.fillStyle = colors[i];
var textX = x1,
textY = y1;
if(start-step/2 > 90 && start-step/2 < 270){
ctx.textAlign = 'right';
textX = textX - padding;
}else{
ctx.textAlign = 'left';
textX = textX + padding;
<html lang="en">
<head>
<meta charset="UTF-8">
<title>繪製餅形圖。</title>
<style>
canvas{
border: 1px solid green;
}
</style>
</head>
<body>
<!-- 繪製餅形圖 -->
<canvas width="500" height="500" id="canvas"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function toAngle(radian){
return radian*180/Math.PI;
}
function toRadian(angle){
return angle*Math.PI/180;
}
/*將餅狀圖畫出來*/
var colors = 'green,yellow,pink,blue,red,lightgreen,lightblue'.split(',');
var text = 'HTML5,Canvas,Javascript,Css3,Ajax,框架封裝,jQuery與移動Web'.split(',');
var x0 = canvas.width/2,
y0 = canvas.height/2,
radius = 100,
start = -5,
distance = 20,
padding = 5,
step = 360/colors.length;
for(var i = 0 ; i < colors.length ; i ++){
ctx.beginPath();
ctx.fillStyle = colors[i];
ctx.moveTo(x0,y0);
ctx.arc(x0,y0,radius,toRadian(start),toRadian(start+=step));
ctx.fill();
/*畫斜線*/
ctx.beginPath();
ctx.strokeStyle = colors[i];
var x1 = x0 + (radius+distance)*Math.cos(toRadian(( start-step/2 ))),
y1 = y0 + (radius+distance)*Math.sin(toRadian(( start-step/2 )));
ctx.moveTo(x0,y0);
ctx.lineTo(x1,y1);
ctx.stroke();
/*寫文字*/
ctx.beginPath();
ctx.fillStyle = colors[i];
var textX = x1,
textY = y1;
if(start-step/2 > 90 && start-step/2 < 270){
ctx.textAlign = 'right';
textX = textX - padding;
}else{
ctx.textAlign = 'left';
textX = textX + padding;
}
<div class = "postDesc"><a href='http://linyi.changtu.com/'>臨沂長途汽車站電話</a> </div>