function darwTrails(){  var canvas = document.getElementById('drawRect');  var context = canvas.getContext('2d');  context.save();  context.translate(130,250);  createTree(context);  context.restore();}function createTree(context){  context.beginPath();  context.moveTo(-25,-50);  context.lineTo(-10,-80);  context.lineTo(-20,-80);  context.lineTo(-5,-110);  context.lineTo(-15,-110);  context.lineTo(0,-140);  context.lineTo(15,-110);  context.lineTo(5,-110);  context.lineTo(20,-80);  context.lineTo(10,-80);  context.lineTo(25,-50);  context.lineWidth=4;  context.lineJoin ='round';  context.strokeStyle='#663300';  context.lineCap='butt';  context.fillStyle='#339900';  context.fill();  context.closePath();  context.stroke();   //树干

   context.fillStyle='#663300';

   context.fillRect(-5,-50,10,50);

}window.addEventListener('load',darwTrails,true);

曲线

function darwTrails(){  var canvas = document.getElementById('drawRect');  var context = canvas.getContext('2d');  context.save();  context.translate(130,250);  createTree(context);  context.restore();    context.translate(-10,350);   context.beginPath();  context.moveTo(0,0);  context.quadraticCurveTo(170,-50,260,-190);  context.quadraticCurveTo(310,-250,410,-250);  context.strokeStyle='#663300';  context.lineWidth=20;  context.stroke();  context.restore();}function createTree(context){  context.beginPath();  context.moveTo(-25,-50);  context.lineTo(-10,-80);  context.lineTo(-20,-80);  context.lineTo(-5,-110);  context.lineTo(-15,-110);  context.lineTo(0,-140);  context.lineTo(15,-110);  context.lineTo(5,-110);  context.lineTo(20,-80);  context.lineTo(10,-80);  context.lineTo(25,-50);  context.lineWidth=4;  context.lineJoin ='round';  context.strokeStyle='#663300';  context.lineCap='butt';  context.fillStyle='#339900';  context.fill();  context.closePath();  context.stroke();  //树干   context.fillStyle='#663300';   context.fillRect(-5,-50,10,50);}window.addEventListener('load',darwTrails,true);

用图片来填充树干

var bark = new Image();  bark.src = "bark.jpg";  bark.onload = function(){      darwTrails();  }    function darwTrails(){  var canvas = document.getElementById('drawRect');  var context = canvas.getContext('2d');  context.save();  context.translate(130,250);  createTree(context);  context.restore();    context.translate(-10,350);   context.beginPath();  context.moveTo(0,0);  context.quadraticCurveTo(170,-50,260,-190);  context.quadraticCurveTo(310,-250,410,-250);  context.strokeStyle='#663300';  context.lineWidth=20;  context.stroke();  context.restore();}function createTree(context){  context.beginPath();  context.moveTo(-25,-50);  context.lineTo(-10,-80);  context.lineTo(-20,-80);  context.lineTo(-5,-110);  context.lineTo(-15,-110);  context.lineTo(0,-140);  context.lineTo(15,-110);  context.lineTo(5,-110);  context.lineTo(20,-80);  context.lineTo(10,-80);  context.lineTo(25,-50);  context.lineWidth=4;  context.lineJoin ='round';  context.strokeStyle='#663300';  context.lineCap='butt';  context.fillStyle='#339900';  context.fill();  context.closePath();  context.stroke();  //树干   //context.fillStyle='#663300';  // context.fillRect(-5,-50,10,50);   context.drawImage(bark,-5,-50,10,50); //bark表示图片，后面的表示从（-5,50）开始宽为10，高为50的矩形}

渐变填充树干

var trunkGradient = context.createLinearGradient(-5,-50,5,-50);  //水平渐变trunkGradient.addColorStop(0,'#663300');trunkGradient.addColorStop(0.4,'#996600');trunkGradient.addColorStop(1,'#552200');context.fillStyle = trunkGradient;context.fillRect(-5,-50,10,50);

放射性渐变

var c=document.getElementById("drawRect");var ctx=c.getContext("2d");var grd=ctx.createRadialGradient(75,50,5,90,60,100);//(x,y,r)(x1,y1,r1)grd.addColorStop(0,"red");grd.addColorStop(0.4,"yellow");grd.addColorStop(1,"white");ctx.fillStyle=grd;ctx.fillRect(10,10,150,100);

使用背景图片（重复）填充曲线

var gravel = new Image();

gravel.src = "gravel.jpg";

gravel.onload = function () {

drawTrails();

}

context.quadraticCurveTo(170,-50,260,-190);  context.quadraticCurveTo(310,-250,410,-250);  context.strokeStyle = context.createPattern(gravel, 'repeat');  context.lineWidth=20;  context.stroke();

绘制一棵放大的树

/*绘制第二棵树*/  context.save();  context.translate(260,500);    /*将第二棵树的宽高分别放大至原来的2倍*/  context.scale(2,2);  createTree(context);  context.restore();

文字

context.save();  context.font='68px impact';//字号 字体  context.fillStyle='#996600';  context.textAlign ='center';  context.fillText('Happy Trails',200,60,400);  context.restore();

阴影

context.shadowColor = 'rgba(0,0,0,0.2)';  context.shadowOffsetX = 15;  context.shadowOffsetY = -10;  //负数表示向上移动阴影  context.shadowBlur = 2;   //高斯模糊 值越大，越模糊