HTML5 用canvas实现吃豆人

实现效果图：

 嘴巴自动张开闭合，张开嘴巴状态，豆豆停留在画面，闭合嘴巴状态，表示吃了豆豆，豆豆会消失。

吃豆人步骤：

1. 先画出底部的粉色部分，一个粉色的圆先画在底下并画出圆的边框再运用一个白色三角形挡在嘴上。
2. 再画出嘴巴的两条线以及眼睛，涉及到一定的45角度边计算。
3. 再画出嘴巴闭合的图形，需要注意的是眼睛的位置需要有所改变。
4. 利用定时器给吃豆人定时张开和闭合绘制。
4. 最后画出吃豆人吃的豆子。

吃豆人代码：

 1.创建吃豆人的对象

<canvas id="canvas" width="400" height="400"></canvas> 

2.绘制画布，设置定时器变量

    var canvas = document.getElementById("canvas"); //获取页面中的canvas元素
    var context = canvas.getContext('2d');     //获取2d绘图上下文，俗称画笔。
    var tiemr = null;      //设置一个定时器变量

3.嘴巴张开时

	//嘴巴张开时的绘制方法
    function open() {
    	//绘制整个身体
        context.beginPath(); 
        context.arc(100, 100, 100, Math.PI * 0.25, Math.PI * 7 / 4);
        context.lineTo(100, 100)
        context.closePath();
        context.fillStyle = 'pink';
        context.fill();
		
		//绘制它的眼睛
        context.beginPath();
        context.arc(100, 50, 20, 0, Math.PI * 2);
        context.closePath();
        context.fillStyle = '#000';
        context.fill();
		
		//绘制它的眼珠
        context.beginPath();
        context.arc(100, 50, 8, 0, Math.PI * 2);
        context.closePath();
        // context.fillStyle = 'red';
        context.fill();
		
		//绘制它的食物
        context.beginPath();
        context.arc(150, 100, 20, 0, Math.PI * 2);
        context.closePath();
        // context.fillStyle = 'green';
        context.fill();
    }

 4.嘴巴关闭时

	//嘴巴关闭时的
    function close() {
    	//绘制整个身体
        context.beginPath();
        context.arc(100, 100, 100, 0, Math.PI * 2);
        context.closePath();
        context.fillStyle = 'pink';
        context.fill();
		
		//绘制它的眼睛
        context.beginPath();
        context.arc(100, 50, 20, 0, Math.PI * 2);
        context.closePath();
        context.fillStyle = '#000';
        context.fill();
		
		//绘制它闭合的嘴巴
        context.beginPath()
        context.moveTo(100, 100);
        context.lineTo(200, 100);
        context.closePath();
        context.stroke();
    }

5.设置定时器，执行绘制

    var i = 0;
    //设置定时器
    timer = setInterval(function() {
        i++;
        //如果当i取余2等于0时
        if (i % 2 == 0) {
            context.clearRect(0, 0, 400, 400);
            //执行张开嘴巴的这个绘制函数，让其一直绘制
            open();
        } else {
            context.clearRect(0, 0, 400, 400);
            //执行闭合嘴巴的这个绘制函数，让其一直绘制
            close();
        }
    }, 500)