代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head><body>
<canvas id="cavsElem" width="400" height="600">您的浏览器不支持Canvas</canvas>
<script>var canvas = document.getElementById('cavsElem'); //获取画布var context = canvas.getContext('2d'); //准备画笔context.lineWidth = '10'; //设置线条的宽度context.strokeStyle = '#f00'; //设置线条的颜色context.lineCap = 'round'; //设置线条的端点形状context.moveTo(10,120) //定义线条的起点坐标context.lineTo(50,120); //定义连接端点context.lineTo(10,150); //定义连接端点context.lineTo(50,150); //定义连接端点context.stroke(); //为线条描边//绘制蓝色的字母“z” context.beginPath(); //重置路径context.strokeStyle = 'blue'; //设置线条的颜色为蓝色context.lineCap = 'butt'; //定义端点平直context.moveTo(10,180); //定义初始位置context.lineTo(50,180); //定义连线端点context.lineTo(10,210); //定义连线端点context.lineTo(50,210); //定义连线端点context.stroke(); //描边路径//绘制粉色的字母“z” context.beginPath(); //重置路径context.strokeStyle = 'pink'; //设置线条的颜色为粉色context.lineCap = 'square'; //定义端点方形context.moveTo(10,240); //定义初始位置context.lineTo(50,240); //定义连线端点context.lineTo(10,280); //定义连线端点context.lineTo(50,280); //定义连线端点context.stroke(); //描边路径</script>
</body>
</html>
上述代码中：
第13行代码使用lineWidth属性定义线条的宽度，该属性的默认宽度为1px，取值为数值（不带单位），以像素为计量单位；
第14行代码使用strokeStyle属性定义描边的颜色，该属性的取值为十六进制颜色值或颜色英文，默认为黑色；
第16~18行代码使用lineTo(x,y)方法来定义连线端点，同时也需要定义x和y的坐标位置；
第19行代码使用stroke()方法给线条添加描边，让线条变得可见。
第24行和33行代码处分别定义了端点的形状；
第22行和31行代码处使用beginPath()方法重置了路径，这是因为在同一画布中，如果想要开始新的路径或重置当前的路径，就需要使用beginPath()方法，当出现beginPath()即表示路径重新开始。
运行效果
从上到下3个图案依次是红色、蓝色和粉色。
线是所有复杂图案的组成基础，想要绘制复杂的图形，首先要从绘制线开始。线由起始位置、连接端点和描边组成。设置了butt（蓝色字母）和square（粉色字母）图案的端点形状是一样的，区别在于蓝色图案比红色和粉色图案短一截，这是因为该图案没有闭合路径。我们可以在stroke()方法前使用closePath()方法来闭合路径，该方法是创建从当前点到开始点的路径。
