<!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);
曲线
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; //高斯模糊 值越大，越模糊