canvas绘制扇形代码实例

2018-8-10 00:57| 作者: admin| 查看: 48| 评论: 0|来自: 蚂蚁部落

分享一段代码实例,它实现了绘制扇形的功能。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
canvas {
  border:2px dotted #ccc;
}
</style>
</head>
<body>
<canvas id="cvs" width="550" height="450"></canvas>
<script type="text/javascript">
function sector(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();
}
var ctx = document.getElementById('cvs').getContext('2d');
//扇形
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 deg = Math.PI / 180;
ctx.sector(100, 100, 80, 30 * deg, 111 * deg).fill();
ctx.fillStyle = "#f00";
ctx.sector(100, 100, 80, 111 * deg, 190 * deg).fill();
ctx.fillStyle = "#0f0";
ctx.sector(100, 100, 80, 190 * deg, 233 * deg).fill();
ctx.fillStyle = "#00f";
ctx.sector(100, 100, 80, 233 * deg, 280 * deg).fill();
ctx.fillStyle = "#789";
ctx.sector(100, 100, 80, 280 * deg, 345 * deg).fill();
ctx.fillStyle = "#abcdef";
ctx.sector(100, 100, 80, 345 * deg, 30 * deg).fill();
</script>
</body>
</html>

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部