给大家分享一个用Canvas写的"小人吃豆"的动画，效果如下：
哈哈，实现代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Canvas绘制动画</title>
<style>
div,
h1 {
text-align: center
}
canvas {
background-color: aqua;
}
</style>
</head>
<body>
<h1>Canvas绘制动画</h1>
<div>
<canvas id="c2" width="500" height="400"></canvas>
</div>
<script>
var ctx = c2.getContext("2d");// 创建画笔
var flag = true;// 设置条件
var eyes = function () {// 绘制眼睛
ctx.beginPath();// 开始路径
ctx.arc(275, 100, 10, 0 * Math.PI / 180, 360 * Math.PI / 180);// 创建圆弧
ctx.strokeStyle = "black";// 设置样式
ctx.lineWidth = 20;// 设置线宽
ctx.stroke();// 描边
};
var eyeball = function () {// 绘制眼球
ctx.beginPath();// 开始路径
ctx.arc(280, 100, 4, 0 * Math.PI / 180, 360 * Math.PI / 180);// 创建圆弧
ctx.strokeStyle = "#fff";// 设置样式
ctx.lineWidth = 8;// 设置线宽
ctx.stroke();// 描边
};
var face = function () {// 绘制张嘴时的脸
ctx.beginPath();// 开始路径
var start = 45;// 起始角
var end = 315;// 结束角
ctx.arc(250, 200, 150, start * Math.PI / 180, end * Math.PI / 180);// 创建圆弧
ctx.lineTo(250, 200);// 画直线
ctx.closePath();// 闭合路径
ctx.strokeStyle = "red";// 设置样式
ctx.lineWidth = 10;// 设置线宽
ctx.stroke();// 描边
eyes();// 调用画眼睛
eyeball();// 调用画眼球
};
var face1 = function () {// 绘制闭嘴时的脸
ctx.beginPath();// 开始路径
var start1 = 0;// 起始角
var end1 = 360;// 结束角
ctx.arc(250, 200, 150, start1 * Math.PI / 180, end1 * Math.PI / 180);// 创建圆弧
ctx.lineTo(250, 200);// 画直线
ctx.strokeStyle = "red";// 设置样式
ctx.lineWidth = 10;// 设置线宽
ctx.stroke();// 描边
eyes();// 调用画眼睛
eyeball();// 调用画眼球
};
var ball = function () {//绘制张嘴时的豆子
x = 350;//设定圆弧x坐标
ctx.beginPath();//开始路径
ctx.arc(x, 200, 10, 0 * Math.PI / 180, 360 * Math.PI / 180);//创建圆弧
ctx.strokeStyle = "yellow";//设置样式
ctx.lineWidth = 20;//设置线宽
ctx.stroke();//描边
};
var ball1 = function () {// 绘制闭嘴时的豆子
x1 = 450;// 设定圆弧x坐标
ctx.beginPath();// 开始路径
ctx.arc(x1, 200, 10, 0 * Math.PI / 180, 360 * Math.PI / 180);// 创建圆弧
ctx.strokeStyle = "yellow";// 设置样式
ctx.lineWidth = 20;// 设置线宽
ctx.stroke();// 描边
};
var clear = function () {// 清除画布函数
ctx.clearRect(0, 0, 500, 400)
};
setInterval(function () {// 设定定时器,切换状态
if (flag == true) {
clear();
face();
ball();
flag = false
} else if (flag == false) {
clear();
face1();
ball1();
flag = true
}
}, 300)
</script>
</body>
</html>
