加入Canvas
<canvas id="diagonal" style="border:1px solid blue;" width="200" height="200"/>
变换
可以通过变换(缩放、平移、旋转)等达到和上面相同的效果。
用变换的方式绘制对角线
context.stroke();</p>
<p>context.restore();
路径
HTML5 Canvas API中的路径代表你希望呈现的任何形状。
beginPath():不论开始绘制何种图形，第一个需要调用的就是beginPath。这个简单的函数不带任何参数，它用来通知canvas将要开始绘制一个新的图形了。
moveTo(x,y):不绘制，将当前位置移动到新的目标坐标(x,y)。
lineTo(x,y):不仅将当前位置移动到新的目标坐标(x,y)，而且在两个坐标之间画一条直线。
closePath():这个函数行为和lineTo很像，唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。它还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭区域，这对将来的填充和描边都非常有用。
绘制一个松树地树冠
context.beginPath();</p>
<p>context.moveTo(-25, -50);
context.lineTo(-10, -80);
context.lineTo(-20, -80);
context.lineTo(-5, -110);
context.lineTo(-15, -110);</p>
<p>// 树的顶点
context.lineTo(0, -140);</p>
<p>context.lineTo(15, -110);
context.lineTo(5, -110);
context.lineTo(20, -80);
context.lineTo(10, -80);
context.lineTo(25, -50);
// 连接起点，闭合路径
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.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将不会显示任何图片，因此，特别注意，在呈现之前，应确保图片已加载完毕。
bark.src = "bark.jpg";</p>
<p>// 图片加载完成后，再调用绘图的函数
bark.onload = function () {
drawTrails();
}
显示图片：
渐变
使用渐变需要三个步骤：
(1)创建渐变对象
(2)为渐变对象设置颜色，指明过渡方式
(3)在context上为填充样式或者描边样式设置渐变
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);
背景图
}</p>
<p>// 用背景图替代棕色粗线条
context.strokeStyle = context.createPattern(gra