路径可以用来在画布上绘制任何形状。路径就是一系列点及这些点间的连线。Canvas上下文只能有一个“当前”路径。当调用context.save()方法时，不会将它储存为当前绘图状态的一部分。
设置路径的开始和结束：调用beginPath()函数开始一个路径，调用closePath()函数结束一个路径。连接路径内的两个点的路径称为子路径。如果终点与起点相连，子路径即成为封闭路径。
最基本的路径通过moveTo()和lineTo() 命令来控制.
canvas路径的相关属性：
方法描述fill()填充当前绘图（路径）stroke()绘制已定义的路径beginPath()起始一条路径，或重置当前路径moveTo()把路径移动到画布中的指定点，不创建线条closePath()创建从当前点回到起始点的路径lineTo()添加一个新点，然后在画布中创建从该点到最后指定点的线条clip()从原始画布剪切任意形状和尺寸的区域quadraticCurveTo()创建二次贝塞尔曲线bezierCurveTo()创建三次方贝塞尔曲线arc()创建弧/曲线（用于创建圆形或部分圆）arcTo()创建两切线之间的弧/曲线isPointInPath()如果指定的点位于当前路径中，则返回 true，否则返回 false案例代码如下：
<!DOCTYPE HTML> <html lang="cn"> <head> <meta charset="utf-8"> <title>canvans</title> <script src="modernizr-custom.js"></script> <script type="text/javascript"> //检测window是否加载完毕最终的代码 window.addEventListener('load', eventWindowLoaded, false); function eventWindowLoaded() { canvasApp(); } //检测是否支持canvas //使用modernizr.js function canvasSupport() { return Modernizr.canvas; } // function canvasApp() { if (!canvasSupport()) { return; } else { var theCanvas = document.getElementById("canvas"); //创建画布实例 var context = theCanvas.getContext("2d"); //获得2D上下文 } drawScreen(); function drawScreen() { context.strokeStyle = "black"; // 设置或返回用于笔触的颜色、渐变或模式 context.lineWidth = "10"; // 设置或返回当前的线条宽度 context.lineCap = "square"; //绘制圆形的结束线帽： context.beginPath(); //起始一条路径，或重置当前路径 context.moveTo(20, 0); //把路径移动到画布中的指定点，不创建线条 context.lineTo(100, 0); //添加一个新点，然后在画布中创建从该点到最后指定点的线条 context.stroke(); //绘制已定义的路径 context.closePath(); //创建从当前点回到起始点的路径 } } </script> </head> <body> <div style="position: absolute;top:50px;left: 50px; z-index: 10;"> <canvas id="canvas" width="500" height="400"> Your browser does not support the canvas element. </canvas> </div> </body> </html>案例2代码：
<!DOCTYPE HTML> <html lang="cn"> <head> <meta charset="utf-8"> <title>canvans</title> <script src="modernizr-custom.js"></script> <script type="text/javascript"> //检测window是否加载完毕最终的代码 window.addEventListener('load', eventWindowLoaded, false); function eventWindowLoaded() { canvasApp(); } //检测是否支持canvas //使用modernizr.js function canvasSupport() { return Modernizr.canvas; } // function canvasApp() { if (!canvasSupport()) { return; } else { var theCanvas = document.getElementById("canvas"); //创建画布实例 var context = theCanvas.getContext("2d"); //获得2D上下文 } drawScreen(); function drawScreen() { //实例1：圆形端点，斜角连接，在画布左上角 context.strokeStyle = 'black'; //需要可用的颜色 context.lineWidth = 10; //设置或返回当前的线条宽度 context.lineJoin = 'bevel'; //设置或返回两条线相交时，所创建的拐角类型 context.beginPath(); //起始一条路径，或重置当前路径 context.moveTo(0, 0); //把路径移动到画布中的指定点，不创建线条 context.lineTo(25, 0); //添加一个新点，然后在画布中创建从该点到最后指定点的线条 context.lineTo(25, 25); //添加一个新点，然后在画布中创建从该点到最后指定点的线条 context.stroke(); //绘制已定义的路径 context.closePath(); //创建从当前点回到起始点的路径 //实例2：圆形端点，斜角连接，不在画布左上角 context.beginPath(); context.moveTo(10, 50); context.lineTo(35, 50); context.lineTo(35, 75); context.stroke(); context.closePath(); //实例3：平直端点，圆形连接，不在画布左上角 context.lineJoin = "round"; //设置或返回两条线相交时，所创建的拐角类型 context.lineCap = "butt"; //设置或返回两条线相交时，所创建的拐角类型 context.beginPath(); context.moveTo(10, 100); context.lineTo(35, 100); context.lineTo(35, 125); context.stroke(); context.closePath(); } } </script> </head> <body> <canvas id="canvas" width="500" height="400"> Your browser does not support the canvas element. </canvas> </body> </html>lineCap属性：设置或返回线条的结束端点样式
值描述butt默认。向线条的每个末端添加平直的边缘。round向线条的每个末端添加圆形线帽。square向线条的每个末端添加正方形线帽。lineJoin属性：设置或返回两条线相交时，所创建的拐角类型
值描述bevel创建斜角。round创建圆角。miter默认。创建尖角。