运用canvas制作吃豆人

吃豆人链接

吃豆人代码：

html

  <canvas width="1800px" height="600px" id="canvas"></canvas>

javascript

 var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
           
            // 画出一个黄色的圆形
            context.beginPath();
            context.fillStyle='#FFDD4F';
            context.arc(100, 100, 100,Math.PI * 0.25, Math.PI * 1.75);
            context.fill();           
             // 画出一个黄色的圆边框
            context.beginPath();
            context.fillStyle='black';
            context.arc(100, 100, 100,Math.PI * 0.25, Math.PI * 1.75);
            context.stroke();           
            // 画出一个白色三角形作为嘴巴
            context.beginPath();
            context.moveTo(100, 100);
            context.lineTo(200, 0);
            context.lineTo(200, 200);
            context.fillStyle='white';
            context.fill()
            //画出嘴巴边框
            context.beginPath();
            context.moveTo(100, 100);
            context.lineTo(100 + Math.sqrt(2)*50, 100 - Math.sqrt(2)*50);
            context.stroke();
            context.beginPath();
            context.moveTo(100, 100);
            context.lineTo(100 + Math.sqrt(2)*50, 100 + Math.sqrt(2)*50);
            context.stroke();
            //画出眼睛
            context.beginPath();
            context.fillStyle='black';
            context.arc(110, 45, 8 ,0, Math.PI * 2);
            context.fill();
            //豆子
            function eat_ting(){
                if (changeblur == true) {
                    for (let i= x - (x % 100) + 260;i < 1800;i += 100) {
                        context.beginPath();
                        context.fillStyle='black';
                        context.arc(i, 100, 10 , 0 , Math.PI * 2);
                        context.fill();
                    }
                }else{
                    for (let i= x - (x % 100) + 20;i > 0;i -= 100) {
                        context.beginPath();
                        context.fillStyle='black';
                        context.arc(i, 100, 10 , 0 , Math.PI * 2);
                        context.fill();
                    }
                }           
            }
            var changeblur = true,x = 0;
            var timer = setInterval(function(){
                context.clearRect(0, 0, 1800, 201);
                if(changeblur == true){
                    x += 30;
                    if(x /10 % 2 == 0){
                        // 画出一个黄色的圆形
                        context.beginPath();
                        context.fillStyle='#FFDD4F';
                        context.arc(100 + x, 100, 100,Math.PI * 0.25, Math.PI * 1.75);
                        context.fill();
                        // 画出一个黄色的圆边框
                        context.beginPath();
                        context.fillStyle='black';
                        context.arc(100 + x, 100, 100,Math.PI * 0.25, Math.PI * 1.75);
                        context.stroke();           
                        // 画出一个白色三角形作为嘴巴
                        context.beginPath();
                        context.moveTo(100 + x, 100);
                        context.lineTo(200 + x, 0);
                        context.lineTo(200 + x, 200);
                        context.fillStyle='white';
                        context.fill();

                        eat_ting()
                        //画出嘴巴边框
                        context.beginPath();
                        context.moveTo(100 + x, 100);
                        context.lineTo(100+ x + Math.sqrt(2)*50, 100 - Math.sqrt(2)*50);
                        context.stroke();
                        context.beginPath();
                        context.moveTo(100 + x, 100);
                        context.lineTo(100 + x + Math.sqrt(2)*50, 100 + Math.sqrt(2)*50);
                        context.stroke();
                        //画出眼睛
                        context.beginPath();
                        context.fillStyle='black';
                        context.arc(110 + x, 45, 8,0, Math.PI * 2);
                        context.fill();
                        }else{
                            eat_ting()
                        // 画出一个黄色的圆形
                        context.beginPath();
                        context.fillStyle='#FFDD4F';
                        context.arc(100 + x, 100, 100,0, Math.PI * 2);
                        context.fill();
                        // 画出一个黄色的圆边框
                        context.beginPath();
                        context.fillStyle='black';
                        context.arc(100 + x, 100, 100,0, Math.PI *2);
                        context.stroke();
                        //画出嘴巴
                        context.beginPath();
                        context.moveTo(100 + x, 100);
                        context.lineTo(200 + x, 100);
                        context.stroke();
                        //画出眼睛
                        context.beginPath();
                        context.fillStyle='black';
                        context.arc(120 + x, 50, 8,0, Math.PI * 2);
                        context.fill();
                    }                        
                }else{
                    x-=30;
                    if(x /10 % 2 == 0){
                     // 画出一个黄色的圆形
                        context.beginPath();
                        context.fillStyle='#FFDD4F';
                        context.arc(100 + x, 100, 100,Math.PI * 0.75, Math.PI * 1.25,true);
                        context.fill();
                        // 画出一个黄色的圆边框
                        context.beginPath();
                        context.fillStyle='black';
                        context.arc(100 + x, 100, 100,Math.PI * 0.75, Math.PI * 1.25,true);
                        context.stroke();           
                        // 画出一个白色三角形作为嘴巴
                        context.beginPath();
                        context.moveTo(100 + x, 100);
                        context.lineTo(x, 0);
                        context.lineTo(x, 200);
                        context.fillStyle='white';
                        context.fill()
                        eat_ting()
                        //画出嘴巴边框
                        context.beginPath();
                        context.moveTo(100 + x, 100);
                        context.lineTo(100+ x - Math.sqrt(2)*50, 100 - Math.sqrt(2)*50);
                        context.stroke();
                        context.beginPath();
                        context.moveTo(100 + x, 100);
                        context.lineTo(100 + x - Math.sqrt(2)*50, 100 + Math.sqrt(2)*50);
                        context.stroke();
                        //画出眼睛
                        context.beginPath();
                        context.fillStyle='black';
                        context.arc(90 + x, 45, 8,0, Math.PI * 2);
                        context.fill();
                    }else{
                        eat_ting()
                        context.beginPath();
                        context.fillStyle='#FFDD4F';
                        context.arc(100 + x, 100, 100,0, Math.PI * 2);
                        context.fill();
                        // 画出一个黄色的圆边框
                        context.beginPath();
                        context.fillStyle='black';
                        context.arc(100 + x, 100, 100,0, Math.PI *2);
                        context.stroke();
                        //画出嘴巴
                        context.beginPath();
                        context.moveTo(100 + x, 100);
                        context.lineTo(x, 100);
                        context.stroke();
                        //画出眼睛
                        context.beginPath();
                        context.fillStyle='black';
                        context.arc(80 + x, 50, 8,0, Math.PI * 2);
                        context.fill(); 
                    }
                }
                if(x >= 1600){
                    changeblur = false;
                }else if(x<= 0){
                    changeblur = true;
                }
      
            },300)

1. 先画出底部的黄色部分，一个黄色的圆先画在底下并画出圆的边框再运用一个白色三角形挡在嘴上。
2. 再画出嘴巴的两条线以及眼睛，涉及到一定的45角度边计算。
3. 再画出嘴巴闭合的图形，需要注意的是眼睛的位置需要有所改变。
4. 利用定时器给吃豆人定时增加坐标x值，并且每次都会先清空画布内容，利用一个开关变量当吃豆人到达边框的x值时变为false，运用同等的方法写出反方向运动的吃豆人。
4. 最后画出吃豆人吃的豆子，遍历所有吃豆人当前x值之后的距离，利用for循环有间距的制作豆子(张口添加时一定要添加在画三角之后)。

~~~~~~ end ~~~~~~