<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header>
55
</header>
<div role="main">
<canvas id = "trails" style="border: 1px solid;" width="400" height="500"></canvas>
<script type="text/javascript">
function createCanopyPath(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(-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.closePath();
};
function drawTrails(context){
//加宽线条
context.lineWidth = 4;
//平滑路径的接合点
context.lineJoin = "round";
//将颜色改成棕色
context.strokeStyle = "#663300";
//用填充色设置为绿色并填充树冠
context.fillStyle = "#339900";
//创建表现树冠的路径
createCanopyPath(context);
//填充它。
context.fill();
context.stroke();
//渐变做树干
//创建用作树干纹理的三阶水平渐变
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 canopyShadow = context.createLinearGradient(0,-50,0,0);
//投影渐变起点是50%的黑色
canopyShadow.addColorStop(0,"rgba(0,0,0,0.5)");
//方向垂直向下，渐变色在很短的距离内迅速渐变到完全透明，这段长度之外的树干上没有投影。
canopyShadow.addColorStop(0.2,"rgba(0,0,0,0.0)");
//在树干上填充投影渐变
context.fillStyle=canopyShadow;
context.fillRect(-5,-50,10,50);
};
function drawRoad(context){
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();
}
//为树创建阴影
function drawYinYing(context){
context.transform(1,0,-0.5,1,0,0);
context.scale(1,0.6);
context.fillStyle = "rgba(0,0,0,0.2)";
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.fill();
}
//为图片写字
function drawFont(context){
context.font = "60px impact";
context.fillStyle = "#996600";
context.textAlign = "center";
context.fillText("Happy Trails",200,60,400);
}
//图片采用了回调模式，因为在HTML5中要想使用图片必须等到图片加载完成以后
//才能够往画布上画东西，所以用到回调模式。
window.onload = function(){
var canvas = document.getElementById("trails");
var context = canvas.getContext("2d");
context.save();
context.translate(130,250);
drawTrails(context);
context.restore();
context.save();
context.translate(260,500);
//将第二棵树分别放大到原来的2倍
context.scale(2,2);
drawTrails(context);
context.restore();
//阴影
context.save();
context.translate(130,250);
drawYinYing(context);
context.restore();
//阴影2
context.save();
context.translate(260,500);
context.scale(2,2);
drawYinYing(context);
context.restore();
//路
context.save();
drawRoad(context);
context.restore();
//文字
context.save();
drawFont(context);
context.restore();
//文字阴影
context.save();
//阴影为黑色，透明度为20%
context.shadowColor = "rgba(0,0,0,0.2)";
//将阴影向右移动15，向上移动10
context.shadowOffsetX = 15;
context.shadowOffsetY = -10;
//轻微模糊阴影
context.shadowBlur = 2;
drawFont(context);
context.restore();
}
</script>
</div>
<footer>
333
</footer>
</body>
</html>
