Canvas变形金刚

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

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

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();

}