// 创建用作树干纹理的三阶水平渐变
var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);</p><p>// 树干的左侧边缘是一般程度的棕色
trunkGradient.addColorStop(0, '#663300');</p><p>// 树干中间偏左的位置颜色要谈一些
trunkGradient.addColorStop(0.4, '#996600');</p><p>// 右侧边缘的颜色要深一些
trunkGradient.addColorStop(1, '#552200');</p><p>// 使用渐变填充树干
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)');</p><p>// 在树干上填充投影渐变
context.fillStyle = canopyShadow;
context.fillRect(-5, -50, 10, 50);

背景图

复制代码