一、w3c里面的代码和实现效果
手册的代码是这样的
var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.moveTo(10, 10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
html5的canvas绘制线条，moveTo和lineTo详解
实现的效果是这样的

二、详细讲解每一个步骤
1，获取id值为myCanvas的canvas标签并赋值给c！（指定在哪里画）
2，

c.getContext('2d');
3, 手册上说是返回一个用于在画布上绘图的环境，2d表示二维绘图！（指定画出的图案的类型）
cxt.moveTo(10, 10);

html5的canvas绘制线条，moveTo和lineTo详解
指定义了一个起点，坐标是（20,20）！这时候的起点如下图
4，
cxt.lineTo(150, 50);
(1)添加一条直线，起点是第3步设置的(10, 10)，终点现在设置的(150, 50)！ 这有两个功能：
(2)设置新的起点为(150, 50)，相当于又来了一句cxt.moveTo(150, 50);而这时候的起点如下图
html5的canvas绘制线条，moveTo和lineTo详解
5，
cxt,lineTo(10, 50);
跟上一条语句功能相同，这时候起点如下图
html5的canvas绘制线条，moveTo和lineTo详解
6,
cxt.stroke();
上面做了那么多的事情但始终没有在网页上面画出了，而这个语句就是将你以上所有做的事都在网页上面呈现出来！所以如果你要测试线条或者图案效果的话，一定不要忘了这一句，不然网页上面是什么都显示不出啦的