我们要做一个好玩的吃豆人先需要的是给出一个画布给出我们的背景大小
<div class="cc">
<canvas width="1000" height="200"></canvas>
</div>
加上背景
.cc{
margin: 150px 500px;
}
canvas{
background-color: #d55555;
}
给我们的背景变成画布获得画笔
var canvas = document.getElementsByTagName('canvas')[0];
// 获取画笔
var ctx = canvas.getContext('2d');
画出我们的豆豆
ctx.beginPath();
ctx.arc(300, 100, 15, 0, Math.PI * 2 , 0);
ctx.fillStyle="green"
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(450, 100, 15, 0, Math.PI * 2 , 0);
ctx.fillStyle="green"
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(600, 100, 15, 0, Math.PI * 2 , 0);
ctx.fillStyle="green"
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(750, 100, 15, 0, Math.PI * 2 , 0);
ctx.fillStyle="green"
ctx.fill();
ctx.stroke();
画出我们的吃豆人
var x=parseInt(Math.random()*950)
var y=parseInt(Math.random()*800)
console.log(x,y)
ctx.arc(100, 100, 50, 0, Math.PI * 7 / 4, 0);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.stroke();
var y=100;
var x=100
var z=20;
var q = true;
给豆人进行移动
setInterval(function(){
if(x+50>950){
z=0
}
if(x<100){
z=20
}
ctx.clearRect(x-55,y-55,120,150);
x+=z;
ctx.beginPath();
ctx.arc(x, y, 50, 0, Math.PI * 7 / 4, 0);
ctx.lineTo(x, y);
ctx.closePath();
ctx.fillStyle="#008c8c"
ctx.fill();
ctx.stroke();
ctx.beginPath();
if (q) {
ctx.arc(x, y, 50, 0, Math.PI * 7 / 4, 0);
q = false
} else {
ctx.arc(x, y, 50, 0, Math.PI * 2, 0);
q = true
}
ctx.lineTo(x, y);
ctx.closePath();
ctx.fillStyle = "#EA450D"
ctx.fill();
ctx.stroke();
}, 100);