1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | var dot_x = canvas.width / 2 ; // 设定圆心位置的 x 坐标,置于整个画布的中央,下同 var dot_y = canvas.height/ 2 ; // 设定圆心位置的y坐标 // 设定半径,在此,去掉 20 的目的,是为了使得整个饼图,可以比画布看上去小些 var radius = (Math.min(canvas.width,canvas.height) - 20)/2; var startAngel = 0; // 起始角度 var start_x = dot_x + radius; var start_y = dot_y; // 设定起始扇形底边所在远端坐标 for(i=0; i<data.length; i++){ // 在 Canvas 下开始一次绘画过程,至 closePath 结束 //Canvas 允许对一次绘画过程所形成的封闭区域,进行统一的颜色填充 brash.beginPath(); // 计算扇形中止弧度,Canvas 使用弧度作为单位 var endAngel = startAngel + Math.PI*2*data['percent']/100; // 设定扇形另一边所在远端点坐标 var end_x = dot_x + radius * Math.cos(endAngel); var end_y = dot_x + radius * Math.sin(endAngel); brash.moveTo(dot_x, dot_y); // 将画笔移动至圆心 // 画扇形的两条边,lineTo 表示在 MoveTo 所设定的起点,至 lineTo 所设定终点间画线 brash.lineTo(start_x, start_y); brash.lineTo(end_x, end_y); // 使用 arc 方法绘画弧形,其中,false 表明在此,将按照逆时针方式进行绘画 brash.arc(dot_x, dot_y, radius, startAngel, endAngel, false); startAngel = endAngel; start_x = end_x; start_y = end_y; brash.closePath(); // 结束本次绘画过程 brash.fillStyle = data['color']; // 设定填充颜色 brash.fill(); // 使用画笔刷填充由最近绘画过程所形成的图形 } |
1 2 3 | <p> <v:line from="0,0" to="100,0" /> </p> |
1 2 3 | <!--[if IE]> <style>cvml\:* { behavior: url(#default#VML); }</style> <![endif]--> |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |