canvas繪製星星程式碼例項

antzone發表於2017-03-24
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"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); //使用context繪製
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//context.fillStyle = "black";
/*線性漸變*/
var linearGrad = context.createLinearGradient(0, 0, 0, 700);
linearGrad.addColorStop(0.0, "#444");
linearGrad.addColorStop(1.0, "#000");
context.fillStyle = linearGrad;
context.fillRect(0, 0, canvas.width, canvas.height);
/*迴圈顯示多少個星星*/
function run() {
  for (var i = 0; i < 123; i++) {
    var r = Math.random() * 5 + 1;
    drawStar(context,
      r,
      2 * r,
      Math.random() * canvas.width,
      Math.random() * canvas.height);
 
  }
}
run();
/*繪製五角星*/
function drawStar(cxt, r, R, x, y) {
  cxt.beginPath();
  var str = ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6); //隨機生成
  for (var i = 0; i < 5; i++) {
    cxt.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * R + x, -Math.sin((18 + i * 72) / 180 * Math.PI) * R + y);
    cxt.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * r + x, -Math.sin((54 + i * 72) / 180 * Math.PI) * r + y);
  }
  cxt.fillStyle = "#" + str;
  cxt.strokeStyle = "#" + str;
  cxt.closePath();
  cxt.fill();
  cxt.stroke();
}
</script>
</body>
</html>

相關文章