运用canvas制作吃豆人

运用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