javascript扇形,css画扇形

如何在 Canvas 中绘制扇形

canvas id="canvas" width="150" height="150"/canvas

script type="text/javascript"

var canvas = document.getElementById("canvas");

function DrawSector(canvas_tag,start_angle,angle,radius,fill,anticlockwise){

var centerPoint = {x:75,y:75};

start_angle = start_angle || 0;

if (canvas_tag.getContext){

//开始绘制路径

ctx = canvas_tag.getContext("2d");

ctx.beginPath();

//画出弧线

ctx.arc(centerPoint.x,centerPoint.y,radius,start_angle,angle,anticlockwise);

//画出结束半径

ctx.lineTo(centerPoint.x,centerPoint.y);

//如果需要填充就填充，不需要就算了

if (fill) {

ctx.fill();

}else{

ctx.closePath();

ctx.stroke();

}

} else {

alert('You need Safari or Firefox 1.5+ to see this demo.');

}

}

//画一个起始角度为45度，结束角度为90度，绘图方向顺时针的填充扇形

DrawSector(canvas,Math.PI/4,Math.PI/2,50,true,false);

//画一个起始角度为-90度，结束角度为-135度，绘图方向逆时针的未填充扇形

DrawSector(canvas,-Math.PI/2,-Math.PI*3/4,50,false,true);

/script

相关问答

Q1: 怎么用javascript做扇形统计图，求源码，万分感谢

script src=""/script

script src=""/script

div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"/div

script

$(function () {

var chart;

$(document).ready(function() {

chart = new Highcharts.Chart({

chart: {

renderTo: 'container',

plotBackgroundColor: null,

plotBorderWidth: null,

plotShadow: false

},

title: {

text: 'Browser market shares at a specific website, 2010'

},

tooltip: {

pointFormat: '{series.name}: b{point.percentage}%/b',

percentageDecimals: 1

},

plotOptions: {

pie: {

allowPointSelect: true,

cursor: 'pointer',

dataLabels: {

enabled: true,

color: '#000000',

connectorColor: '#000000',

formatter: function() {

return 'b'+ this.point.name +'/b: '+ this.percentage +' %';

}

}

}

},

series: [{

type: 'pie',

name: 'Browser share',

data: [

['Firefox', 45.0],

['IE', 26.8],

{

name: 'Chrome',

y: 12.8,

sliced: true,

selected: true

},

['Safari', 8.5],

['Opera', 6.2],

['Others', 0.7]

]

}]

});

});

});

/script

Q2: javascript怎样给饼图填色?

希望这个程序给你带来帮助：可以使用

HTML xmlns:v

HEADTITLE?/TITLE

META http-equiv=Content-Type content=text/html;charset=gb2312

STYLE

v\:* {

BEHAVIOR: url(#default#VML)

}

/STYLE

SCRIPT language=javascript

function init(){

var ssarr=new Array(200,100,200,80,100,50);

var cxx=200,cyy=150,rx=200,ry=150;

drawPie(cxx,cyy,rx,ry,ssarr);

}

function drawPie(cx,cy,rx,ry,sarr){

var total=0;

var colorsh=new Array('#ff0000','#0033FF','#aa4400','#33ffff','#FF00FF');

for(var i=0;isarr.length;i++){ total+=sarr[i]; }

for(var i=0;isarr.length;i++){ sarr[i]=sarr[i]/total; }

var startang=0;

for(var i=0;isarr.length;i++){

var endang=Math.round(23592960*sarr[i]);

var colorindex=i % colorsh.length;

if((colorindex==0) (i==(sarr.length-1))) colorindex++;

var thiscolor=colorsh[colorindex];

drawfan(cx,cy,rx,ry,startang,endang,thiscolor);

startang+=endang;

}

}

function drawfan(cx,cy,rx,ry,startang,endang,thiscolor){

/* 画扇形

(cx,cy) 中心坐标

rx 一个半径 ry 另一个半径

startang,endang 起始角度和结束角度

thiscolor 填充颜色

*/

var mapone=document.createElement("v:shape path=\"m "+cx+" "+cy+" al "+cx+" "+cy+" "+rx+" "+ry+" "+startang+" "+endang+" l "+cx+" "+cy+" e\" style=\"position:relative;rotation:0;WIDTH:400;HEIGHT:300;\" coordsize = \"400,300\" fillcolor=\""+thiscolor+"\" strokecolor=\""+thiscolor+"\" strokeweight=\"1pt\"/v:shape");

group1.appendChild(mapone);

}

/SCRIPT

/HEAD

BODY onload=init();

v:group

id=group1

style="left:0;top:0;WIDTH: 400px; POSITION: absolute; HEIGHT: 300px; rotation: 0" coordsize="400,300"

v:line from="0,0" to="400,0"/

v:line from="400,0" to="400,300"/

v:line from="400,300" to="0,300"/

v:line from="0,300" to="0,0"/

/v:group

/BODY

/HTML