利用HTM5的Canvas画布写的小火车

先附上效果图

<script>

    var c=document.getElementById("myCanvas");
    var context=c.getContext("2d");

    context.strokeRect(50,150,300,150);//第一个火车矩形框；以（50,150）为起点，宽300，高150


    context.strokeRect(400,150,300,150);//第二个火车矩形框；以（400,150）为起点，宽300，高150


    context.strokeRect(750,150,300,150); //第三个个火车矩形框；以（750,150）为起点，宽300，高150


    context.strokeRect(275,100,25,50);//火车头的烟囱（较大的那个矩形框）；以（275,100）为起点，宽25，高50


    context.strokeRect(282,75,11,25);//火车头的烟囱（较小的那个矩形框）；以（282,75）为起点，宽11，高25


    context.strokeRect(70,180,40,40); //火车头的窗户的矩形框；以（70,180）为起点，宽40，高40，是一个正方形

    //第一个火车头与第二个火车头的连接线；以（350,225）为起点，长度为50，（400,225）为终点
    context.moveTo(350, 225);
    context.lineTo(400, 225);
    context.stroke();

    //第二个火车头与第三个火车头的连接线；以（700,225）为起点，长度为50，（750,225）为终点
    context.moveTo(700,225);
    context.lineTo(750,225);
    context.stroke();

    //第一个火车头窗户的横线；以（70,200）为起点，长度为40，（110,200）为终点
    context.moveTo(70, 200);
    context.lineTo(110, 200);
    context.stroke();
    //第一个火车头窗户的竖线；以（90,180）为起点，长度为40，（90,220）为终点
    context.moveTo(90, 180);
    context.lineTo(90, 220);
    context.stroke();


    //第一个火车头的前轮；以（125,300）为圆心，半径为25的圆
    context.beginPath();
    context.arc(125,300,25,0,2*Math.PI);
    context.stroke();
    context.closePath();

    //第一个火车头的后轮；以（250,300）为圆心，半径为25的圆
    context.beginPath();
    context.arc(250,300,25,0,2*Math.PI);
    context.stroke();
    context.closePath();

    //第二个火车头的前轮；以（475,300）为圆心，半径为25的圆
    context.beginPath();
    context.arc(475,300,25,0,2*Math.PI);
    context.stroke();
    context.closePath();

    //第二个火车头的后轮；以（600,300）为圆心，半径为25的圆
    context.beginPath();
    context.arc(600,300,25,0,2*Math.PI);
    context.stroke();
    context.closePath();

    //第三个火车头的前轮；以（825,300）为圆心，半径为25的圆
    context.beginPath();
    context.arc(825,300,25,0,2*Math.PI);
    context.stroke();
    context.closePath();

    //第三个火车头的后轮；以（950,300）为圆心，半径为25的圆
    context.beginPath();
    context.arc(950,300,25,0,2*Math.PI);
    context.stroke();
    context.closePath();
</script>