简易的吃豆豆
作者：互联网
1.先看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" context="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" context="ie=edge">
<title></title>
</head>
<body>
<canvas id="canvas" width="600" height="600">
</canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var tiemr = null;
var x = 0
for(var i = 0 ;i<480;i){
i +=60;
//绘制它的食物
context.beginPath();
context.arc(i+70, 100, 20, 0, Math.PI * 2);
context.closePath();
context.fillStyle = 'green';
context.fill();
}
//嘴巴张开时的绘制方法
function open() {
//绘制整个身体
context.beginPath();
context.arc(100+x, 100, 50, Math.PI * 0.25, Math.PI * 7 / 4);
context.lineTo(100+x, 100)
context.fillStyle = 'pink';
context.fill();
//绘制它的眼睛
context.beginPath();
context.arc(100+x, 80, 10, 0, Math.PI * 2);
context.fillStyle = '#000';
context.fill();
x +=30;
}
//嘴巴关闭时的
function close() {
//绘制整个身体
context.beginPath();
context.arc(100+x, 100, 50, 0, Math.PI * 2);
context.closePath();
context.fillStyle = 'pink';
context.fill();
//绘制它的眼睛
context.beginPath();
context.arc(100+x, 80, 10, 0, Math.PI * 2);
context.closePath();
context.fillStyle = '#000';
context.fill();
//绘制它闭合的嘴巴
context.beginPath()
context.moveTo(100+x, 100);
context.lineTo(150+x, 100);
context.closePath();
context.stroke();
x +=30;
}
var i = 0;
var y = 0;
//设置定时器
timer = setInterval(function() {
i++;
//如果当i取余2等于0时
if (i % 2 == 0) {
context.clearRect(20+y, 50, 100, 100);
//执行张开嘴巴的这个绘制函数，让其一直绘制
open();
} else {
context.clearRect(20+y, 50, 100, 100);
//执行闭合嘴巴的这个绘制函数，让其一直绘制
close();
}
y +=30;
if(y>420){
clearInterval(timer);
}
}, 1000)
</script>
</html>
标签：canvas,吃豆豆,i420,clearInterval,简易,var,null 来源： https://blog.csdn.net/qq_45256777/article/details/120209878