canvas绘画扇形图
Posted tqzuy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas绘画扇形图相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="height: 100px"></div>
<div style="text-align: center">
<canvas id="myCanvas" style="border: 1px solid gray;background-color: lightblue" width="600" height="400">
</canvas>
</div>
<div>
<input type="button" value="好样的red" οnclick="lujing1()"/>
<input type="button" value="好样的blue" οnclick="lujing2()"/>
<input type="button" value="好样的aqua" οnclick="lujing3()"/>
</div>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
function teyong()
CanvasRenderingContext2D.prototype.sector = function(x,y,r,angle1,angle2)
this.save();
this.beginPath();
this.moveTo(x,y);
this.arc(x,y,r,angle1*Math.PI/180,angle2*Math.PI/180,false);
this.closePath();
this.restore();
return this;
;
function lujing1()
teyong();
ctx.fillStyle = 'red';
ctx.sector(230,200,100,270,390).fill();
function lujing2()
teyong();
ctx.fillStyle = 'blue';
ctx.sector(220,200,100,150,270).fill();
function lujing3()
teyong();
ctx.fillStyle = 'aqua';
ctx.sector(225,210,100,30,150).fill();
</script>
</body>
</html>
以上是关于canvas绘画扇形图的主要内容，如果未能解决你的问题，请参考以下文章