蚂蚁部落

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 21|回复: 0

[代码实例] canvas绘制鱼吃豆效果代码实例

[复制链接]
发表于 2017-1-9 17:35:02 | 显示全部楼层 |阅读模式
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>

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复返回顶部 返回列表