可爱的吃豆人

吃豆人的难点可能就在于嘴巴的张开与闭合这里，很多人不明白这个效果是怎么实现的，其实只需要画一个3/4圆和一个矩形便可。

		// 吃豆人形状-整体
        // 1. 标识开始创建  beginPath()
        context.beginPath()
        // 2. 设置绘制的形状 - rect()
        context.arc(400,200,100,0,Math.PI*1.5)
        // 3. 标识创建路径  closePath()
        context.closePath()
        // 4. 绘制 fill() stroke()
        context.fill()

这里绘制便是一个3/4圆，由于是使用fill绘画的，所以圆的终点和起点这两个点相连接。

context.fillStyle = "green"
        context.fillRect(400,100,100,100)

只需要在圆的右上部分绘制一个矩形进行遮盖，这样吃豆人的嘴巴便显示出来啦。然后再将画布旋转45deg便实现了吃豆人身体的绘画。
最后至于要在js中改变吃豆人身体的坐标，也就是圆心的坐标，便实现吃豆人的移动，在加上定时器来重绘吃豆人的身体，全部功能便实现完成，最后附上完整代码：

<script>
    var canvas = document.getElementsByTagName("canvas")[0]
    var context = canvas.getContext("2d")
    context.rotate(45*Math.PI/180)
    var timer = null;
    var lock = true;
    var x = 0,y=0;
    function body1(){
        context.fillStyle = "black"
        // 吃豆人形状-整体
        // 1. 标识开始创建  beginPath()
        context.beginPath()
        // 2. 设置绘制的形状 - rect()
        context.arc(400+x,100+y,100,0,Math.PI*1.5)
        // 3. 标识创建路径  closePath()
        context.closePath()
        // 4. 绘制 fill() stroke()
        context.fill()
        context.fillStyle = "white"
        context.fillRect(400+x,0+y,100,100)
    }
    function body2(){
        context.fillStyle = "black"
        // 吃豆人形状-整体
        // 1. 标识开始创建  beginPath()
        context.beginPath()
        // 2. 设置绘制的形状 - rect()
        context.arc(400+x,100+y,100,0,Math.PI*2)
        // 3. 标识创建路径  closePath()
        context.closePath()
        // 4. 绘制 fill() stroke()
        context.fill()
    }
    function food(){
        context.fillStyle = "gold"
        context.beginPath()
        // 2. 设置绘制的形状 - rect()
        context.arc(600,-100,25,0,Math.PI*2)
        // 3. 标识创建路径  closePath()
        context.closePath()
        // 4. 绘制 fill() stroke()
        context.fill()

        context.fillStyle = "blue"
        context.beginPath()
        // 2. 设置绘制的形状 - rect()
        context.arc(700,-200,25,0,Math.PI*2)
        // 3. 标识创建路径  closePath()
        context.closePath()
        // 4. 绘制 fill() stroke()
        context.fill()

        context.fillStyle = "hotpink"
        context.beginPath()
        // 2. 设置绘制的形状 - rect()
        context.arc(800,-300,25,0,Math.PI*2)
        // 3. 标识创建路径  closePath()
        context.closePath()
        // 4. 绘制 fill() stroke()
        context.fill()

        context.fillStyle = "green"
        context.beginPath()
        // 2. 设置绘制的形状 - rect()
        context.arc(900,-400,25,0,Math.PI*2)
        // 3. 标识创建路径  closePath()
        context.closePath()
        // 4. 绘制 fill() stroke()
        context.fill()
    }
    function moveStrat(){
        food()
        timer = setInterval(function(){
            context.clearRect(299+x,-1+y,202,202)
            x = x+10
            y = y-10
            if(lock){
                body1()
                lock = false
            }else{
                body2()
                lock = true
            }
            if(x>=450){
                clearInterval(timer)
            }
        },300)
    }
    moveStrat()
    
</script>