本文主要介绍如何使用HTML5Canvas绘制直线或者等腰折线。 通过CanvasAPI，我们可以方便地使用JavaScript来操作图形的位置坐标。 有需要的同学可以参考以下
HTML5Canvas基本概念讲解
html5，这个应该不用介绍了，只要是开发者，都应该不会陌生。 HTML5 是一种“新兴”网络技术标准。 目前，除了IE8及以下版本外，几乎所有主流浏览器（FireFox、Chrome、Opera、Safari、IE9+）都已经开始支持HTML5。 此外，在联通浏览器市场，不少联通浏览器围绕“html5支持和性能”展开了军备竞赛。 HTML是一个革命性的Web技术标准，再加上众多浏览器厂商或组织的全力支持，可以想象HTML5将成为未来Web技术的领导者。
HTML5，说它是“新兴的”，当然不是什么新鲜事。 当然，早在2008年，html5的初稿就已经向公众发布了。 从2008年算起，已经有一段时间了。 然而到目前为止，对于大多数开发者来说，一直是“雷大，雨小”——html5很多，但真正使用html5的却很少。
众所周知，html5中增加了很多新的功能。 在html5的众多特性中，Canvas应该算是最引人注目的新特性之一。 我们使用html5的Canvas对象直接在浏览器的网页上绘制图形。 这意味着浏览器可以直接在网页上显示图形或动画，而无需Flash等第三方插件。
现在，我们就为html5初学者介绍如何使用html5Canvas绘制基本图形。
首先我们需要准备如下html基本代码：
XML/HTMLCode 将内容复制到剪贴板
>HTML5Canvas 入门示例
上面的代码是一个html5页面的基本代码模板。 其中，第一行代码是文档类型标签指令，也是html5页面的标准文档类型指令，用于告诉浏览器“这是一个html5页面，请根据html5网页标准”。 第四行代码用来告诉浏览器“这个html5页面的字符编码是UTF-8”，这也是html5网页字符编码的标准写法。 这与前几年的 html 字符编码指令有所不同。
XML/HTMLCode 将内容复制到剪贴板
现在，我们将在包含上述代码的html文件中给出Canvas绘制图形的示例。 首先，我们将以下canvas标签添加到上述html代码的主体部分。
XML/HTMLCode 将内容复制到剪贴板
>HTML5Canvas 入门示例 您的浏览器不支持canvas 标签。
此时，我们使用支持html5的浏览器打开页面，我们会听到以下内容：
在html5中，canvas标签本身没有任何行为，它只是占据页面上指定大小的页面空白区域。 canvas标签相当于一块空白的画布，我们需要使用JavaScript提供的canvas API来编译相应的代码，才能在这块画布上绘制出我们想要的图形。
备注：canvas标签正文中的文本内容将在不支持html5的浏览器中显示。 如上面的html代码所示，如果您的浏览器不支持html5的canvas标签，则canvas标签上会显示“您的浏览器不支持canvas标签”的文字。
作为“画家”，我们首先需要熟悉手中的笔画，即JavaScript中的Canvas对象及其相关内容。
在html5中，一个canvas标签对应一个Canvas对象，我们可以使用JavaScript中的document.getElementById()等常规函数来获取该对象。 值得注意的是，在JavaScript中，我们并不是直接操作Canvas对象，而是通过Canvas对象来获取对应的图形渲染上下文对象CanvasRenderingContext2D，然后借助CanvasRenderingContext2D自带的很多用于绘制图形的函数来进行绘制目的。
似乎每一张画布都对应一个笔画。 要在画布上绘图，我们首先要获取对应的笔画，然后用这个笔画在画布上画画。 CanvasRenderingContext2D 对象相当于此笔划。 现在，让我们尝试在 JavaScript 中得到这个笔划。
XML/HTMLCode 将内容复制到剪贴板
>HTML5Canvas Outline Waistline 入门示例 您的浏览器不支持canvas 标签。 //获取Canvas对象(canvas) varcanvas=document.getElementById("myCanvas");//简单测量当前浏览器是否支持Canvas对象，以免在某些不支持html5的浏览器中提示语句错误 if( canvas.getContext){//获取对应的CanvasRenderingContext2D对象(笔画) varctx=canvas.getContext("2d");}
如上面的代码所示，我们可以使用Canvas对象的getContext()方法来获取CanvasRenderingContext2D对象。 细心的读者应该注意到了：getContext()方法需要传入一个字符串——2d，并且获取到的CanvasRenderingContext2D对象的名字也有2D。 这是因为目前html5只支持2D绘图，未来的html5可能还支持3D或其他绘图。 这时我们可能需要使用getContext("3d")来获取CanvasRenderingContext3D对象并绘制3D图形。
使用html5canvas绘制腰线（直线、折线等）
使用html5Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和技巧（带“()”的是方法）如下：
属性或方法的基本描述
笔划样式
用于设置笔划轮廓路径的颜色、渐变和图案。 该属性的值可以是代表css颜色值的字符串。如果你的绘图需求比较复杂，该属性的值还可以是CanvasGradient对象或CanvasPattern对象
全局阿尔法
定义绘制内容的透明度，值在0.0（完全透明）和1.0（完全不透明）之间，默认值为1.0。
行宽
定义轮廓腰线的长度。 默认值为 1.0，但此属性必须小于 0.0。 较宽的腰围以路径为中心，每侧为腰围宽度的一半。
线帽
指定如何绘制腰线两端的线帽。 合法值为“butt”、“round”和“square”。 默认为“屁股”。
开始路径()
开始一条新的草绘路径。 请记住每次在绘制新路径之前调用此技巧。 它将重置视频内存中的现有路径。
moveTo(intx, inty)
联通划到指定坐标点(x,y)，即新子路径的起点
lineTo(intx, inty)
用直线连接当前端点和指定坐标点(x,y)
行程（intx，inty）
沿着所绘制路径的坐标点顺序绘制直线
关闭路径()
如果当前草图路径打开，则关闭草图路径。 据悉，当调用该方法时，它会尝试用直线连接当前端点和起始端点以闭合路径，但如果图形已经闭合（例如先调用了Stroke()）或者只有一点，不做就没有任何作用。
Canvas图形的绘制过程中，几乎都是按照一定的顺序设置几个坐标点，也就是所谓的绘制路径，然后根据我们的需要将这些坐标点以指定的形式连接起来，从而产生我们需要的图形。 当我们理解了CanvasRenderingContext2D对象的上述API后，绘制腰线就变得非常简单了。
使用画布绘制基本直线
今天我们用canvas来画最基本的直线。
JavaScript代码将内容复制到剪贴板
"myCanvas" width="400px" height="300px"style="border:1pxsolidred;">您的浏览器不支持canvas标签。
疗效如下：
使用画布绘制彩色线条
众所周知，在现实世界中，笔触也是多种多样的，并且有多种不同的颜色。 同样，Canvas 描边 CanvasRenderingContext2D 对象也可以有您需要的各种颜色。 在前面的代码示例中，如果我们没有指定颜色，则 Canvas 的描边默认为最常见的白色。
现在我们再次使用Canvas笔画绘制一条红色直线（基于页面的简单性html5 折线图，下面只给出关键的JavaScript代码，也请参考之前的完整代码示例）。
XML/HTMLCode 将内容复制到剪贴板
>HTML5Canvas Outline Waistline 入门示例 您的浏览器不支持canvas 标签。 //获取Canvas对象(canvas) varcanvas=document.getElementById("myCanvas");//简单测量当前浏览器是否支持Canvas对象，以免在某些不支持html5的浏览器中提示语句错误 if( canvas. getContext){//获取对应的CanvasRenderingContext2D对象（描边） varctx=canvas.getContext("2d");//开始新的绘制路径 ctx.beginPath();//定义线条的起点坐标为(10, 10) ctx.moveTo(10,10);//定义直线的结束坐标为(50,10)ctx.lineTo(50,10);//沿着顺序的路径画一条线坐标点 ctx.lines(); //关闭当前绘制路径 ctx.closePath();//绘制一条有颜色的直线 ctx.moveTo(10,30);ctx.lineTo(50,30);//支持css颜色值的各种表示方式，如: "blue", "#0000ff", "#00f", "rgb(0,0,255)", "rgba(0,0,255,1)"//颜色等设置必须在最终的sketch中调用ctx .StrokeStyle="blue" before functionStroke();ctx.Stroke();//关闭当前笔画路径 ctx.closePath();}
相应的疗效如右图所示：
使用canvas绘制基本折线
当我们掌握了Canvas画直线的时候，用折线等其他方式画腰线就容易多了。 我们只需要再画几个路径的中间点，依次连接起来就可以了。
JavaScript代码将内容复制到剪贴板
相应的疗效如右图所示：
掌握了以上内容后，相信你对使用Canvas勾勒腰线有了一些基本的了解。 因为腰围长度和透明度的控制只是设置单个属性的问题，请参考之前的相关API，这里不再赘述。
强烈注意：绘制图形路径时，一定要先调用beginPath()。 beginPath()方法会清除显存中之前的绘制路径信息。 如果不这样做，可能对绘制单个图形没有影响，而在绘制多个图形（如上例中的两条直线）时，则会导致路径绘制或颜色填充出现任何意外结果。
据悉，初学者一定要注意closePath()方法，尤其是前面API表中closePath()方法描述中的蓝色文字。 在绘制折线的代码示例中，我们首先调用Stroke()，然后调用closePath()。 虽然在调用Stroke()方法时，折线已经绘制完成，并且当前绘制路径是闭合的，所以当再次调用closePath()方法时html5 折线图，它不会使用直线来连接当前端点和起始终点（也就是说这里的closePath()可有可无，但为了保持良好的习惯，建议还是写一下）。 如果我们交换一下Stroke()和closePath()的调用顺序，情况就完全不同了。 因为先调用closePath()，此时草绘路径还没有闭合，所以closePath()会用直线连接当前端点和起始端点。
交换Stroke()和closePath()的调用顺序后的示例代码如下：
交换调用顺序后，对应的显示效果如下：
相关文章
