canvas繪製魚吃豆效果程式碼例項

antzone發表於2017-03-26
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='a1' width="500" height="400"></canvas>
<script>
//得到畫布上的畫筆並設定繪製方式
var ctx = a1.getContext('2d'); 
function openMouse() {
  //繪製圓（3/4）
  ctx.beginPath(); //開始一條路徑
  //圓心為（250,200），半徑為100
  ctx.arc(250, 200, 100, 45 * Math.PI / 180, 315 * Math.PI / 180); 
  ctx.lineTo(250, 200);
  ctx.closePath();
  ctx.stroke(); //勾勒輪廓/描邊
  ctx.fillStyle = '#00ffff';
  ctx.fill();
  eye();
}
//openMouse();
function closeMouse() {
  ctx.beginPath(); //開始一條路徑
  //圓心為（250,200），半徑為100
  ctx.arc(250, 200, 100, 0 * Math.PI / 180, 360 * Math.PI / 180); 
  ctx.lineTo(250, 200);
  ctx.closePath();
  ctx.stroke(); //勾勒輪廓/描邊
  ctx.fillStyle = '#00ffff';
  ctx.fill();
  eye();
 
}
//closeMouse();
//繪製公共部分眼睛
function eye() {
  //繪製眼睛
  ctx.beginPath();
  ctx.arc(250, 200 - 100 / 2, 25, 0, 2 * Math.PI); //眼睛半徑為25
  ctx.stroke();
  ctx.fillStyle = '#001900';
  ctx.fill();
  //繪製眼神光
  ctx.beginPath();
  ctx.arc(265, 140, 5, 0, 2 * Math.PI); //眼神光半徑為5
  ctx.stroke();
  ctx.fillStyle = '#ffffff';
  ctx.fill();
}
var isOpen = true; //定義變數isOpen：是否張開
var timer = setInterval(function() {
  var ctx = a1.getContext('2d');
  ctx.clearRect(0, 0, 500, 400); //清空畫布大小
  if (isOpen) {
    closeMouse();
    isOpen = false;
  } else {
    openMouse();
    isOpen = true;
  }
}, 500);
</script>
</body>
</html>

相關文章