canvas繪製北斗七星效果

admin發表於2017-02-24
Canvas

分享一段程式碼例項，它實現了繪製北斗七星效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.bigDipper-box {
  width: 320px;
  height: 200px;
  margin: 0 auto;
}
body {
  margin: 0;
}
</style>
</head>
<body>
<div class="bigDipper-box">
  <canvas style="width: 320px;height: 200px;background: black;" id="bigDipper"></canvas>
</div>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
var BH = $('.bigDipper-box').height(),
  BW = $('.bigDipper-box').width();
var STAR_COUNT = 30;
var canvas = document.getElementById('bigDipper');
var ctx = canvas.getContext('2d');
  
function rndf(n) {
  return Math.floor(Math.random() * n);
} //隨機一個星星出現的位置
function rndcl(n) {
  return Math.ceil(Math.random() * n);
} //隨機一個星星的大小
function rnd() {
  return Math.random();
}
  
function rndcr(n) {
  return Math.ceil(Math.random() * n + 4);
} //隨機一個星星的大小
function rndc() {
  return "rgba(" + rndf(255) + ", " + rndf(255) + ", " + rndf(255) + ", 0.5)";
} //隨機一種顏色
function arc(a) {
  ctx.beginPath();
  var gradient = ctx.createRadialGradient(a.x1, a.y1, a.r1, a.x1, a.y1, a.r2); //放射性圓形漸變
  gradient.addColorStop(0, "white"); //顏色定點位置結束，開始為白色
  gradient.addColorStop(0.4, "white");
  gradient.addColorStop(0.6, a.color); //轉向隨機顏色
  gradient.addColorStop(1, "black"); //最後為黑色
  ctx.fillStyle = gradient;
  ctx.arc(a.x1, a.y1, a.r2, Math.PI * 2, false);
  ctx.fill();
}
  
function line(a) {
  ctx.strokeStyle = '#fff';
  ctx.lineWidth = 1;
  ctx.lineCap = 'square';
  ctx.beginPath();
  ctx.moveTo(a.x1, a.y1);
  ctx.lineTo(a.x2, a.y2);
  ctx.stroke();
  ctx.closePath();
}
  
function star() {
  var n = 0;
  ctx.clearRect(0, 0, 320, 200); //清除上次畫布上的內容
  var lin = [{
    x1: BW * .05,
    y1: BH * .2,
    x2: BW * .2,
    y2: BH * .19
  }, {
    x1: BW * .2,
    y1: BH * .19,
    x2: BW * .35,
    y2: BH * .3
  }, {
    x1: BW * .35,
    y1: BH * .3,
    x2: BW * .45,
    y2: BH * .40
  }, {
    x1: BW * .45,
    y1: BH * .40,
    x2: BW * .47,
    y2: BH * .6
  }, {
    x1: BW * .47,
    y1: BH * .6,
    x2: BW * .67,
    y2: BH * .65
  }, {
    x1: BW * .67,
    y1: BH * .65,
    x2: BW * .73,
    y2: BH * .42
  }];
  for (var i = 0; i < lin.length; line(lin[i]), i++); //重畫七星連線
  
  var sta = [{
    x1: BW * .05,
    y1: BH * .2,
    r1: rndcl(3),
    r2: rndcr(7),
    color: rndc()
  }, {
    x1: BW * .2,
    y1: BH * .19,
    r1: rndcl(3),
    r2: rndcr(7),
    color: rndc()
  }, {
    x1: BW * .35,
    y1: BH * .3,
    r1: rndcl(3),
    r2: rndcr(7),
    color: rndc()
  }, {
    x1: BW * .45,
    y1: BH * .40,
    r1: rndcl(3),
    r2: rndcr(7),
    color: rndc()
  }, {
    x1: BW * .47,
    y1: BH * .6,
    r1: rndcl(3),
    r2: rndcr(7),
    color: rndc()
  }, {
    x1: BW * .67,
    y1: BH * .65,
    r1: rndcl(3),
    r2: rndcr(7),
    color: rndc()
  }, {
    x1: BW * .73,
    y1: BH * .42,
    r1: rndcl(3),
    r2: rndcr(7),
    color: rndc()
  }];
  for (var i = 0; i < STAR_COUNT; ++i) { //隨機生成STAR_COUNT個小星星襯托夜空
    var s = {
      x1: BW * rnd(),
      y1: BH * rnd(),
      r1: rndcl(0),
      r2: rndcr(1),
      color: rndc()
    };
    sta.push(s);
  }
  for (var j = 0; j < sta.length; arc(sta[j]), j++);
  
  setTimeout(star, 1000);
}
star();
</script>
</body>
</html>

相關文章