canvas 画一幅画

小时候经常喜欢画这样的画，有山有水有人家。
代码有点繁冗，把重复出现的代码用函数封装起来复用会好些~

有木有感觉回到了童年？哈——哈

代码如下：

function createCanopyPath(context){
    context.beginPath();
    context.moveTo(-25,-100);
    context.lineTo(-10,-110);
    context.lineTo(-20,-110);
    context.lineTo(-5,-120);
    context.lineTo(-15,-120);

    context.lineTo(0,-135);

    context.lineTo(15,-120);
    context.lineTo(5,-120);
    context.lineTo(20,-110);
    context.lineTo(10,-110);
    context.lineTo(25,-100);
    context.lineWidth=4;
    //平滑路径
    context.lineJion='round';
    context.strokeStyle='green';
    context.fillStyle='green';
    context.fill();

    lineColor(context);
    context.fillRect(-5,-100,10,30);  

    context.save();
    context.translate(-10,10);
    context.beginPath();

    context.moveTo(0,100);
    context.quadraticCurveTo(250,0,-190,-150);
    //第二条曲线向下弯曲
    //context.quadraticCurveTo(0,0,160,-190);
    context.strokeStyle='#84c1ff';
    context.lineWidth=20;

    //连接起点闭合路径
    context.closePath();
}
function draw(){
    var canvas=document.getElementById('canvas');
    var context=canvas.getContext('2d');
    context.save();
    context.translate(50,140);
    /*绘制阴影树冠*/
    /*要先绘制阴影树，让阴影呈现在绿树的下层*/
    context.save();
    context.transform(1,0,-0.5,1,0,0);
    context.scale(1,0.8);
    context.beginPath();
    context.moveTo(-55,-120);
    context.lineTo(-40,-130);
    context.lineTo(-50,-130);
    context.lineTo(-35,-140);
    context.lineTo(-45,-140);

    context.lineTo(-30,-155);

    context.lineTo(-15,-140);
    context.lineTo(-25,-140);
    context.lineTo(-10,-130);
    context.lineTo(-20,-130);
    context.lineTo(-5,-120);
    context.lineWidth=4;
    context.strokeStyle='rgba(0,0,0,0.1)';
    context.fillStyle='rgba(0,0,0,0.1)';
    context.fill();

    /*绘制阴影树干*/
    context.fillStyle='rgba(0,0,0,0.1)';
    context.fillRect(-40,-120,10,30);

    context.restore();

   //创建表现树冠的路径
    createCanopyPath(context);

    //绘制当前路径
    context.stroke();
    context.restore();

    context.save();
    context.transform(1,0,-0.5,1,0,0);
    context.scale(1,0.8);
    context.beginPath();
    context.moveTo(180,-110);
    context.lineTo(125,-150);
    context.lineTo(70,-115);
    context.lineWidth=4;
    context.strokeStyle='rgba(0,0,0,0)';
    context.fillStyle='rgba(0,0,0,0.1)';
    context.fill();

    context.fillStyle='rgba(0,0,0,0.1)';
    context.fillRect(70,-112,70,24);
    context.stroke();
    context.restore();


    context.save();
    context.beginPath();
    context.moveTo(180,-100);
    context.lineTo(125,-135);
    context.lineTo(70,-100);
    context.lineWidth=4;
    context.strokeStyle='#bb3d00';
    context.fillStyle='#bb3d00';
    context.fill();

    context.fillStyle='#a5a552';
    context.fillRect(75,-100,100,30);

    context.fillStyle='#ff8000';
    context.fillRect(115,-90,20,20);
    context.stroke();
    context.restore();

    context.save();
    context.beginPath();
    context.moveTo(125,-70);
    context.lineTo(125,-90);
    context.lineWidth=2;
    context.strokeStyle='#bb3d00';

    context.stroke();
    context.restore();

    context.save();
    context.transform(1,0,-0.5,1,0,0);
    context.scale(1,0.8);
    context.beginPath();
     context.moveTo(-5,-32);
    context.lineTo(10,-42);
    context.lineTo(0,-42);
    context.lineTo(15,-52);
    context.lineTo(5,-52);

    context.lineTo(20,-67);

    context.lineTo(35,-52);
    context.lineTo(25,-52);
    context.lineTo(40,-42);
    context.lineTo(30,-42);
    context.lineTo(50,-32);
    context.lineWidth=4;
    context.strokeStyle='rgba(0,0,0,0)';
    context.fillStyle='rgba(0,0,0,0.1)';
    context.fill();

    /*绘制阴影树干*/
    context.fillStyle='rgba(0,0,0,0.1)';
    context.fillRect(13,-32,10,25);
    context.stroke();
    context.restore();
    context.save();

    context.beginPath();
    context.moveTo(-5,-30);
    context.lineTo(10,-40);
    context.lineTo(0,-40);
    context.lineTo(15,-50);
    context.lineTo(5,-50);

    context.lineTo(20,-65);

    context.lineTo(35,-50);
    context.lineTo(25,-50);
    context.lineTo(40,-40);
    context.lineTo(30,-40);
    context.lineTo(50,-30);
    context.lineWidth=4;
    context.strokeStyle='rgba(0,0,0,0)';
    context.fillStyle='green';

    context.fill();

    /*绘制树干*/
    lineColor(context);
    context.fillRect(15,-30,10,25);
    context.stroke();
    context.restore();

}
function lineColor(context){
            var treeShadow=context.createLinearGradient(15,-30,10,25);
            treeShadow.addColorStop(0,"#663300");
            treeShadow.addColorStop(0.4,"#996600");
            treeShadow.addColorStop(1,"#552200");
              context.fillStyle=treeShadow;

            //绘制当前路径

}

draw();

html:

  <section >
        <div class=content> 
            <canvas id="canvas"></canvas>
        </div>
    </section>

css:

 *{margin:0;padding:0;}
    section{width:800px;height:500px;margin:100px auto;background-color:yellow;}
    .content{width:100%;height:500px;background-color:green;}
    #canvas{width:100%;height:500px;background-color:#eee;}