<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas width="1900" height="400" style="background-color: #aabbcc;"></canvas>
<script>
// 获取画布
var canvas = document.getElementsByTagName('canvas')[0]
// 获取绘制上下文
var ctx = canvas.getContext('2d')
var ctx1 = canvas.getContext('2d')
// 定义样式
ctx.fillStyle = 'yellow'
ctx.strokeStyle = 'gray'
// 定义嘴巴开启速度与初始大小
var speed = 1.7;
var s = 0.03;
var point = 100;
var p = 5;
setInterval(function () {
// 清掉之前画的图
ctx.clearRect(point - 106, 1, 200, 200)
// 开启一个新路径
ctx.beginPath()
// 画圆
ctx.arc(point, 100, 100, 0, Math.PI * speed, 0)
ctx.lineTo(point, 100)
// 结束路径
ctx.closePath();
// 填充
ctx.fill();
// 画边
ctx.stroke();
// 控制嘴巴开启关闭与移动
point += p
speed += s
// 当嘴巴闭合时速度取反 让嘴巴张开
if (speed >= 2) {
s = -s
}
// 当嘴巴张开到一定程度时再对速度取反让嘴巴开始闭合
if (speed < 1.7) {
s = -s
}
// 到最右边后重新开始，重新绘制食物与吃豆人
if (point >= 2100) {
point = -100;
food();
}
}, 10)
// 循环创建食物
function food() {
for (var i = 3; i <= 18; i++) {
if (i % 3 == 0) {
ctx1.beginPath();
ctx1.arc(i * 100, 100, 20, 0, Math.PI * 2, 0)
ctx1.closePath();
ctx1.fill();
}
}
}
food();
</script>
</body>
</html>