小时候经常喜欢画这样的画,有山有水有人家。
代码有点繁冗,把重复出现的代码用函数封装起来复用会好些~
有木有感觉回到了童年?哈——哈
代码如下:
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;}