canvas 繪製扇形

admin發表於2018-08-10
Canvas
分享一段程式碼例項，它實現了繪製扇形的功能。

程式碼例項如下:

[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>

相關文章