canvas實現的簡單餅狀圖程式碼例項

admin發表於2017-02-17
Canvas

分享一段程式碼例項，它利用canvas實現了簡單的餅狀圖效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
 
function rand(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}
 
function bing(deg) {
  this.r = rand(100, 150);
  this.color = "rgba(" + rand(0, 256) + "," + rand(0, 256) + "," + rand(0, 256) + "," + Math.random() + ")";
  ctx.beginPath();
  ctx.fillStyle = this.color;
  ctx.moveTo(250, 250);
  ctx.arc(250, 250, this.r, deg, deg + Math.PI / 4, false);
  ctx.closePath();
  ctx.stroke();
  ctx.fill();
}
 
var deg = 0;
for (var i = 0; i < 8; i++) {
  bing(deg)
  deg += Math.PI / 4;
}
</script>
</body>
 
</html>

相關文章