响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版例5-4 Document

代码

<!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()方法来闭合路径，该方法是创建从当前点到开始点的路径。