context.closePath();
}</p>
<p>function drawTrails() {
var canvas = document.getElementById(‘diagonal’);
var context = canvas.getContext(‘2d’);</p>
<p>context.save();
context.translate(130, 250);</p>
<p>// 创建表现树冠的路径
createCanopyPath(context);</p>
<p>// 绘制当前路径
context.stroke();
context.restore();
}</p>
<p>window.addEventListener(“load”, drawTrails, true);
描边样式
通过描边模式，可以让树冠看起来更加真实。
复制代码
//加宽线条
context.lineWidth = 4;
//平滑路径的接合点
context.lineJoin = ’round’;
//颜色
context.strokeStyle = ‘#663300’;
// 绘制当前路径
context.stroke();
填充样式
context.fillStyle = "#339900"; context.fill();
绘制矩形
我们给树增加树干
context.fillStyle = ‘#663300’; context.fillRect(-5, -50, 10, 50);
绘制曲线
复制代码
context.save();
context.translate(-10, 350);
context.beginPath();</p>
<p>// 第一条曲线向右上方弯曲
context.moveTo(0, 0);
context.quadraticCurveTo(170, -50, 260, -190);</p>
<p>// 向右下方弯曲
context.quadraticCurveTo(310, -250, 410, -250);</p>
<p>// Draw the path in a wide brown stroke
context.strokeStyle = ‘#663300’;
context.lineWidth = 20;
context.stroke();</p>
<p>// Restore the previous canvas state
context.restore();
在Canvas中插入图片
必须等到图片完全加载后才能对其进行操作。浏览器通常会在页面脚本执行时异步加载图片，如果试图在图片未完全加载之前就将其呈现到canvas上，那么 canvas将不会显示任何图片，因此，特别注意，在呈现之前，应确保图片已加载完毕。
复制代码
// 加载图片
var bark = new Image();
bark.src = “bark.jpg”;</p>
<p>// 图片加载完成后，再调用绘图的函数
bark.onload = function () {
drawTrails();
}
显示图片：
//用背景图案填充，作为树干的背景 context.drawImage(bark, -5, -50, 10, 50);
渐变
使用渐变需要三个步骤：
(1)创建渐变对象
(2)为渐变对象设置颜色，指明过渡方式
(3)在context上为填充样式或者描边样式设置渐变
复制代码
// 创建用作树干纹理的三阶水平渐变
var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);</p>
<p>// 树干的左侧边缘是一般程度的棕色
trunkGradient.addColorStop(0, ‘#663300’);</p>
