html5用canvas画小黄人

初学者，用canvas画小黄人

<script>
    window.onload=function(){
        var c=document.getElementById("people");
        var txt=c.getContext("2d");
        //身体
        txt.beginPath();
        txt.strokeStyle="black";
        txt.fillStyle="#F7D845"
        txt.lineWidth=2;
        txt.arc(200,120,80,0,Math.PI*1,true)
        txt.moveTo(280,120)
        txt.lineTo(280,280)
        txt.arc(200,280,80,0,Math.PI*1,false)
        txt.lineTo(120,120)
        txt.fill();
        txt.stroke();
        txt.closePath();

        //头发
        txt.beginPath();
        txt.strokeStyle="black";
        txt.lineWidth=2;
        txt.moveTo(200,40)
        txt.quadraticCurveTo(180,20,160,40)
        txt.stroke();

        txt.beginPath();
        txt.strokeStyle="black";
        txt.lineWidth=2;
        txt.moveTo(200,40)
        txt.quadraticCurveTo(180,20,160,25)
        txt.stroke();

        txt.beginPath();
        txt.strokeStyle="black";
        txt.lineWidth=2;
        txt.moveTo(200,40)
        txt.quadraticCurveTo(180,20,160,10)
        txt.stroke();

        //眼睛带

        txt.beginPath();
        txt.strokeStyle="black";
        txt.lineWidth=5;
        txt.moveTo(120,130)
        txt.lineTo(150,130)
        txt.stroke();
        txt.closePath();

        txt.beginPath();
        txt.strokeStyle="black";
        txt.lineWidth=5;
        txt.moveTo(250,130)
        txt.lineTo(280,130)
        txt.stroke();
        txt.closePath();
        //眼睛

        txt.beginPath();
        txt.fillStyle="black"
        txt.lineWidth=2;
        txt.arc(175,130,25,0,Math.PI*2,true)
        txt.fill();
        txt.stroke();
        txt.closePath();

        txt.beginPath();
        txt.fillStyle="white"
        txt.lineWidth=2;
        txt.arc(175,130,24,0,Math.PI*2,true)
        txt.fill();
        txt.stroke();
        txt.closePath();

        txt.beginPath();
        txt.fillStyle="black"
        txt.lineWidth=2;
        txt.arc(175,130,12,0,Math.PI*2,true)
        txt.fill();
        txt.stroke();
        txt.closePath();

        txt.beginPath();
        txt.fillStyle="white"
        txt.lineWidth=2;
        txt.arc(179,126,6,0,Math.PI*2,true)
        txt.fill();
        txt.stroke();
        txt.closePath();

        txt.beginPath();
        txt.fillStyle="black"
        txt.lineWidth=2;
        txt.arc(225,130,25,0,Math.PI*2,true)
        txt.fill();
        txt.stroke();
        txt.closePath();

        txt.beginPath();
        txt.fillStyle="white"
        txt.lineWidth=2;
        txt.arc(225,130,24,0,Math.PI*2,true)
        txt.fill();
        txt.stroke();
        txt.closePath();

        txt.beginPath();
        txt.fillStyle="black"
        txt.lineWidth=2;
        txt.arc(225,130,12,0,Math.PI*2,true)
        txt.fill();
        txt.stroke();
        txt.closePath();

        txt.beginPath();
        txt.fillStyle="white"
        txt.lineWidth=2;
        txt.arc(229,126,6,0,Math.PI*2,true)
        txt.fill();
        txt.stroke();
        txt.closePath();

        //嘴
        txt.beginPath();
        txt.fillStyle="white"
        txt.arc(200,183,20,2.9,Math.PI*1.85,true)
        txt.fill();
        txt.closePath();

        //蓝色衣服
        txt.beginPath();
        txt.strokeStyle="black";
        txt.fillStyle="blue"
        txt.lineWidth=2;
        txt.arc(200,280,80,0,Math.PI*1,false)
        txt.fill();
        txt.stroke();
        txt.closePath();

        //两个手
        txt.beginPath();
        txt.strokeStyle="black";
        txt.fillStyle="#F7D845"
        txt.lineWidth=2;
        txt.moveTo(280,220)
        txt.quadraticCurveTo(320,250,260,260)
        txt.stroke();


        txt.beginPath();
        txt.moveTo(120,220)
        txt.quadraticCurveTo(80,250,140,260)
        txt.stroke();
        txt.closePath();
        txt.closePath();
        //裤带
        txt.beginPath();
        txt.strokeStyle="blue";
        txt.lineWidth=8;
        txt.moveTo(120,200)
        txt.quadraticCurveTo(200,280,280,200)
        txt.stroke();
        txt.closePath();


        txt.beginPath();
        txt.strokeStyle="black";
        txt.lineWidth=2;
        txt.fillStyle="blue"
        txt.fillRect(160,226,80,54)
        txt.fill();
        txt.stroke();
        txt.closePath();


        //小黑扣
        txt.beginPath();
        txt.fillStyle="black"
        txt.arc(162,229,5,0,Math.PI*2,false)
        txt.fill();
        txt.stroke();

        txt.beginPath();
        txt.fillStyle="black"
        txt.arc(237,229,5,0,Math.PI*2,false)
        txt.fill();
        txt.stroke();

        txt.beginPath();
        txt.strokeStyle="black";
        txt.lineWidth=2;
        txt.arc(200,255,10,0,Math.PI*2,false)
        txt.stroke();
        txt.closePath();

        //腿
        txt.beginPath();
        txt.strokeStyle="blue";
        txt.lineWidth=20;
        txt.moveTo(178,350)
        txt.lineTo(178,390)
        txt.stroke();

        txt.beginPath();
        txt.strokeStyle="blue";
        txt.lineWidth=20;
        txt.moveTo(216,350)
        txt.lineTo(216,390)
        txt.stroke();
        txt.closePath();

        //鞋子
        txt.beginPath();
        txt.strokeStyle="blue";
        txt.lineWidth=10;
        txt.fillStyle="black"
        txt.arc(178,390,10,0,Math.PI*2,false)
        txt.fill();
        txt.stroke();

        txt.beginPath();
        txt.fillStyle="black"
        txt.arc(216,390,10,0,Math.PI*2,false)
        txt.fill();
        txt.stroke();
        txt.closePath();

    }
</script>

效果图