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;}