Canvas变形金刚

这里是html代码

<canvas width=500 height=500 id="cas"></canvas>

这里是css代码

*{
    margin: 0;
    padding: 0;
}
canvas{
    /*border: 1px solid;*/
    position: absolute;
    margin-left: 50%;
    left: -250px;
}

这里是js代码

onload = function () {
        var cas = document.querySelector("#cas");
        var ctx = cas.getContext("2d");
        //左上角的眼睛
        ctx.moveTo(12,55);
        ctx.lineTo(78,55);
        ctx.lineTo(96,107);
        ctx.lineTo(185,164);
        ctx.lineTo(205,259);
        ctx.lineTo(135,259);
        ctx.lineTo(34,194);
        ctx.closePath();//最后一次和第一次拼接

        //左上角的眼睛里面的空白
        ctx.moveTo(57,102);
        ctx.lineTo(60,125);
        ctx.lineTo(171,196);
        ctx.lineTo(171,176);
        ctx.closePath();

        //左上角的眼睛里面的空白2
        ctx.moveTo(64,149);
        ctx.lineTo(70,173);
        ctx.lineTo(179,244);
        ctx.lineTo(179,225);
        ctx.closePath();

        //左边的脸
        ctx.moveTo(48,235);
        ctx.lineTo(93,264);
        ctx.lineTo(92,293);
        ctx.lineTo(136,320);
        ctx.lineTo(136,454);
        ctx.lineTo(136,454);
        ctx.lineTo(68,406);
        ctx.closePath();

        //嘴巴
        ctx.moveTo(207,293);
        ctx.lineTo(207,394);
        ctx.lineTo(293,395);
        ctx.lineTo(294,293);
        ctx.lineTo(340,325);
        ctx.lineTo(340,468);
        ctx.lineTo(322,482);
        ctx.lineTo(294,417);
        ctx.lineTo(206,417);
        ctx.lineTo(180,480);
        ctx.lineTo(160,468);
        ctx.lineTo(160,325);
        ctx.closePath();

        //下巴
        ctx.moveTo(224,438);
        ctx.lineTo(276,438);
        ctx.lineTo(296,482);
        ctx.lineTo(205,482);
        ctx.closePath();

        //鼻子
        ctx.moveTo(211,179);
        ctx.lineTo(249,203);
        ctx.lineTo(290,180);
        ctx.lineTo(270,260);
        ctx.lineTo(270,369);
        ctx.lineTo(231,369);
        ctx.lineTo(232,260);
        ctx.closePath();

        //右边的脸
        ctx.moveTo(363,320);
        ctx.lineTo(407,293);
        ctx.lineTo(408,264);
        ctx.lineTo(452,234);
        ctx.lineTo(432,406);
        ctx.lineTo(364,453);
        ctx.lineTo(364,320);
        ctx.closePath();

        //右上角的眼睛
        ctx.moveTo(408,56);
        ctx.lineTo(486,56);
        ctx.lineTo(465,194);
        ctx.lineTo(364,259);
        ctx.lineTo(293,259);
        ctx.lineTo(314,163);
        ctx.lineTo(402,108);
        ctx.closePath();//最后一次和第一次拼接

        //右上角的眼睛里面的空白
        ctx.moveTo(444,101);
        ctx.lineTo(329,175);
        ctx.lineTo(329,196);
        ctx.lineTo(442,124);
        ctx.closePath();

        //右上角的眼睛里面的空白2
        ctx.moveTo(437,148);
        ctx.lineTo(321,223);
        ctx.lineTo(321,243);
        ctx.lineTo(433,172);
        ctx.closePath();

        //头上的宝石
        ctx.moveTo(117,56);
        //圆形
        ctx.lineTo(383,56);

        ctx.lineTo(378,93);
        ctx.lineTo(251,177);
        ctx.lineTo(122,93);
        ctx.closePath();

        //头上的宝石空白
        ctx.moveTo(194,79);
        ctx.lineTo(250,118);
        ctx.lineTo(306,79);
        //最后一个圆
        ctx.lineTo(194,79);

        ctx.stroke();
        ctx.fill();

    }