<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <canvas id=‘drawRect‘ width=‘300‘ height=‘300‘></canvas> </body> </html>
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);
原文：http://www.cnblogs.com/positive/p/3855394.html