html5 canvas 画圆

Submitted by Lizhe on Thu, 08/03/2017 - 16:48

 

先看一段画圆的简单代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>title</title> 
</head>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

</script>

</body>
</html>

 

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

x,y 是圆心坐标点

r 是半径

sAngle,eAngle 是角的弧度, 以 0~2 乘以 pi 记

arc

counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针

稍作改动ctx.arc(100,75,50,0,0.75*Math.PI);可以得到一个下弧形

447

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>title</title> 
</head>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 初始保存
ctx.save();
// 位移到目标点
ctx.translate(100, 100);
ctx.beginPath();
// 画出圆弧
ctx.arc(0,0,50,0,0.75*Math.PI);
// 再次保存以备旋转
ctx.save();
// 旋转至起始角度
ctx.rotate(0.75*Math.PI);
// 移动到终点,准备连接终点与圆心
ctx.moveTo(50,0);
// 连接到圆心
ctx.lineTo(0,0);
// 还原
ctx.restore();
// 旋转至起点角度
ctx.rotate(0);
// 从圆心连接到起点
ctx.lineTo(50,0);
ctx.closePath();
// 还原到最初保存的状态
ctx.restore();
ctx.fill()

</script>

</body>
</html>

448

 

抽成公用方法可以写成

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>title</title> 
</head>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">

</canvas>

<script>


CanvasRenderingContext2D.prototype.sector = function (x, y, radius, sDeg, eDeg) {
this.save();
this.translate(x, y);
this.beginPath();
this.arc(0,0,radius,sDeg, eDeg);
this.save();
this.rotate(eDeg);
this.moveTo(radius,0);
this.lineTo(0,0);
this.restore();
this.rotate(sDeg);
this.lineTo(radius,0);
this.closePath();
this.restore();
return this;
}
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.sector(100,100,50,0,0.75*Math.PI).fill();
</script>

</body>
</html>

有了上面的基础内容制作饼形图就会变得非常容易

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>title</title> 
</head>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">

</canvas>

<script>


CanvasRenderingContext2D.prototype.sector = function (x, y, radius, sDeg, eDeg) {
this.save();
this.translate(x, y);
this.beginPath();
this.arc(0,0,radius,sDeg, eDeg);
this.save();
this.rotate(eDeg);
this.moveTo(radius,0);
this.lineTo(0,0);
this.restore();
this.rotate(sDeg);
this.lineTo(radius,0);
this.closePath();
this.restore();
return this;
}

var ctx = document.getElementById('myCanvas').getContext('2d');

ctx.sector(100,100,80,0,0.75*Math.PI).fill();
ctx.fillStyle="#f00";
ctx.sector(100,100,80,0.75*Math.PI,1.0*Math.PI).fill();
ctx.fillStyle="#0f0";
ctx.sector(100,100,80,1.0*Math.PI,1.5*Math.PI).fill();
ctx.fillStyle="#00f";
ctx.sector(100,100,80,1.5*Math.PI,2.0*Math.PI).fill();

</script>

</body>
</html>

449