canvas绘制折线图,canvas画线段

　　010-5900HTML5，这个应该不用介绍了，只要开发者熟悉就好。Html5是一个“新兴”的web技术标准。目前几乎所有主流浏览器(FireFox、Chrome、Opera、Safari、IE9)都已经开始支持html5，除了IE8及以下版本。此外，在手机浏览器市场，很多手机浏览器也展开了关于“html5支持能力和性能”的军备竞赛。作为html革命性的web技术标准，再加上众多浏览器厂商或组织的大力支持，可以想象html5将成为未来web技术的引领者。

　　Html5，说是“新兴”，其实并不新鲜。毕竟html5的第一个官方草案早在2008年就已经发布了。从2008年到现在已经几年了。然而，到目前为止，对于大多数开发者来说，仍然是“雷声大，雨点小”。3354很多人听说过html5，但实际使用html5的很少。

　　众所周知，html5中加入了许多新功能。在html5的众多特性中，Canvas应该算是最引人注目的新特性之一。我们可以使用html5的Canvas对象直接在浏览器的网页上绘制图形。这意味着浏览器可以直接在网页上显示图形或动画，而无需Flash等第三方插件。

　　现在，为html5初学者介绍如何使用html5 canvas绘制基本图形。

　　首先，我们需要准备以下html基本代码：

　　XML/HTML代码将内容复制到剪贴板！doctype HTML HTML Head meta charset= UTF-8 Title HTML5 canvas入门示例/Title/Head body/body/HTML以上代码是HTML 5页面的一个基本代码模板。其中，第一行代码！DOCTYPE html是文档类型标签指令，也是html5页面的标准文档类型指令。用来告诉浏览器“这是一个html5页面，请按照html5的网页标准解析并显示此页面”。第四行代码metacarset= UTF-8 用来告诉浏览器“这个html5页面的字符编码是UTF-8”，这也是设置html5网页字符编码的标准方式。这与之前的html字符编码指令不同。

　　XML/HTML代码将内容复制到剪贴板！-之前的html字符编码指令如下-meta http-equiv= content-type content= text/html；Charset=UTF-8 现在，让我们在包含上述代码的html文件中给出一个画布绘制图形的例子。首先，我们将下面的canvas标签添加到上面的html代码的主体部分。

　　XML/HTML代码将内容复制到剪贴板！doctype HTML HTML Head meta charset= UTF-8 Title HTML 5 canvas入门示例/title /head body！-添加画布标签并添加红色边框以查看页面上的效果-canvas ID= my canvas width= 400 px height= 300 px style= border:1 px solid red；您的浏览器不支持画布标签。/canvas/body/html此时，我们用支持html5的浏览器打开此页面，我们将看到以下内容：

　　在html5中，canvas标签本身什么也不做，只是占据页面上指定大小的空白空间。Canvas label相当于一块空白的画布，我们需要利用JavaScript提供的canvas API自己编写相应的代码，在这块画布上绘制出想要的图形。

　　注意：canvas标记体中的文本内容将在不支持html5的浏览器中显示。如上面的html代码所示，如果你的浏览器不支持html5的canvas标签，那么在canvas标签处会显示文本“你的浏览器不支持canvas标签”。

　　作为“画师”，我们首先需要熟悉手中的画笔，也就是JavaScript中的画布对象及其相关内容。

　　在html5中，一个canvas标签对应一个Canvas对象，我们可以使用JavaScript中的document.getElementById()等常规函数来获取对象。值得注意的是，在JavaScript中，我们并不直接操作CanvasRenderingContext2D对象，而是通过CanvasRenderingContext2D对象获取对应的绘图上下文对象，然后利用canvasrenderingcontext 2d对象自带的很多绘图函数进行绘制。

　　就好像每一张画布都对应一把画笔。要在画布上作画，我们得先拿到相应的画笔，然后用这个画笔在画布上作画。CanvasRenderingContext2D对象相当于这个画笔。现在，让我们先尝试在JavaScript中获得这个画笔。

　　XML/HTML代码将内容复制到剪贴板！doctype HTML HTML Head meta charset= UTF-8 Title HTML 5 canvas画线初学者示例/title /head body！-添加画布标签并添加红色边框以查看页面上的效果-canvas ID= my canvas width= 400 px height= 300 px style= border:1 px solid red；您的浏览器不支持画布标签。/Canvas script type= text/JavaScript //Get Canvas object(Canvas)var Canvas=document . getelementbyid( my Canvas )；//简单检查当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中(CanvasRenderingContext)如果{//获取对应的CanvasRenderingContext2D对象(brush)var CTX=Canvas . Get context( 2d )；} /script /body /html如上面的代码所示，我们可以使用CanvasRenderingContext2D对象的getContext()方法获取canvasrenderingcontext 2d对象。细心的读者要注意，getContext()方法需要传入一个——2d的字符串，获得的CanvasRenderingContext2d对象的名称也带有2D。这是因为html5目前只支持2D绘制，但在未来的html5中也可能支持3D或其他形式的绘制。那时我们可能需要使用getContext(3d )来获取CanvasRenderingContext3d的3D对象，并绘制3D图形。

　　HTML5 Canvas基本概念讲解使用html 5 canvasrenderingcontext 2d对象绘制直线所需的主要属性和方法(带 ()的方法如下):属性或方法的基本描述strokeStyle用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是表示css颜色值的字符串。如果绘图要求很复杂，该属性的值也可以是CanvasGradient对象或CanvasPattern对象。globalAlpha定义绘图内容的透明度。该值介于0.0(完全透明)和1.0(完全不透明)之间，默认值为1.0。线宽定义绘制线条的宽度。默认值为1.0，该属性必须大于0.0。较宽的线条位于路径的中心，两边各有线条宽度的一半。LineCap指定如何绘制线条两端的线帽。合法值为“对接”、“圆形”和“方形”。默认值为“对接”。BeginPath()开始一个新的绘图路径。记得每次画新路径前都要调用这个方法。它将重置内存中的现有路径。MoveTo(int x，int y)将画笔移动到指定的坐标点(x，y)，这是新子路径的起点。lineTo(int x，int y)用指定的坐标点连接当前端点(x，y) x，y) stroke(int x，int y)沿绘制路径的坐标点顺序绘制一条直线。closePath()如果当前绘图路径是打开的，关闭它。此外，当调用此方法时，它将尝试通过用直线连接当前端点和起始端点来闭合路径，但如果图形是闭合的(如先调用stroke()或只有一个点)，它将什么也不做。

　　在画布的绘制过程中，几乎所有的坐标点都是先按照一定的顺序设定的，也就是所谓的绘制路径，然后根据我们的需要将这些坐标点按照指定的方式连接起来，从而形成我们需要的图形。当我们知道上面CanvasRenderingContext2D对象的API后，画线就很简单了。

　　用画布画出基本线条。

　　现在，我们用画布画出最基本的直线。

　　将JavaScript代码内容编码到剪贴板！doctype HTML HTML Head meta charset= UTF-8 Title HTML 5 canvas画线初学者示例/title /head body！-添加带有红色边框的画布标签，以便于在页面上查看-canvas ID= my canvas width= 400 px height= 300 px style= border:1 px solidred；您的浏览器不支持画布标签。/Canvas script type= text/JavaScript //Get Canvas object(Canvas)var Canvas=document . getelementbyid( my Canvas )；//简单检查当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中(CanvasRenderingContext)如果{//获取对应的CanvasRenderingContext2D对象(brush)var CTX=Canvas . Get context( 2d )；//注意画布的坐标系是：画布左上角是原点(0，0)，右边是横坐标，向下是纵坐标。单位是像素(px)。//开始新的绘制路径CTX . begin path()；//将直线的起点坐标定义为(10，10) ctx.moveTo(10，10)；//将直线终点的坐标定义为(50，10) ctx.lineTo(50，10)；//沿着坐标点序列的路径画一条直线CTX . stroke()；//关闭当前绘图路径CTX . Close path()；} /script /body /html显示效果如下：

　　使用html5 canvas绘制线条(直线、折线等)

　　众所周知，在现实世界中，画笔种类繁多，颜色各异。同样，画布画笔CanvasRenderingContext2D对象也可以拥有你需要的所有颜色。在上面的代码示例中，如果我们不指定颜色，Canvas的画笔默认为最常见的黑色。

　　现在我们再次用Canvas的笔刷画一条蓝色的直线(基于页面的简洁，下面只给出关键的JavaScript代码，也请参考上面完整的代码示例)。

　　XML/HTML代码将内容复制到剪贴板！doctype HTML HTML Head meta charset= UTF-8 Title HTML 5 canvas画线初学者示例/title /head body！-添加带有红色边框的画布标签，以便于在页面上查看-canvas ID= my canvas width= 400 px height= 300 px style= border:1 px solidred；您的浏览器不支持画布标签。/Canvas script type= text/JavaScript //Get Canvas object(Canvas)var Canvas=document . getelementbyid( my Canvas )；//简单检查当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中(CanvasRenderingContext2D获取对应的CanvasRenderingContext2D对象(brush)var CTX=Canvas . Get context( 2d )；//开始新的绘制路径CTX . begin path()；//将直线的起点坐标定义为(10，10) ctx.moveTo(10，10)；//将直线终点的坐标定义为(50，10) ctx.lineTo(50，10)；//沿着坐标点序列的路径画一条直线CTX . stroke()；//关闭当前绘图路径CTX . Close path()；//画一条彩色直线ctx.moveTo(10，30)；ctx.lineTo(50，30)；//支持多种形式的css颜色值，如： blue ， #0000ff ， #00f ， rgb(0，0，255)， rgba(0，0，255，1) //color等设置，这些都必须在最终的绘图函数stroke(和ctx.stroke())中设置；//关闭当前绘图路径CTX . Close path()；} /script /body /html对应的显示效果如下：

　　使用canvas绘制带颜色的直线

　　当我们掌握了用画布画直线的时候，画折线等其他形式的线就容易多了。我们只需要再画几个路径的中间点，依次连接起来。

　　代码将内容复制到剪贴板script type= text/JavaScript //Get Canvas object(Canvas)var Canvas=document . getelementbyid( my Canvas )；//简单检查当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中(CanvasRenderingContext)如果{//获取对应的CanvasRenderingContext2D对象(brush)var CTX=Canvas . Get context( 2d )；//开始新的绘制路径CTX . begin path()；//将线条颜色设置为蓝色ctx.strokeStyle= blue//设置路径起点坐标ctx.moveTo为(20，50)；//定义中间点坐标1 ctx.lineTo(60，50)；//定义中间点坐标2 ctx.lineTo(60，90)；//定义中间点坐标3(这是最后一个中间点，也就是终点)ctx.lineTo(100，90)；//按照绘制路径顺序连接各个坐标点CTX . stroke()；//关闭绘图路径CTX . Close path()；} /script对应的显示效果如下：

　　掌握了以上内容，相信你对用画布画线有了一些基本的认识。由于线条的宽度和透明度只能通过设置单个属性来控制，请参考上面的相关API，这里就不赘述了。

　　强注：绘制图形路径时，一定要先调用beginPath()。beginPath()方法将清除内存中以前的绘图路径信息。如果不这样做，可能不会影响单个图形的绘制，但是在绘制多个图形时(比如上面例子中的两条直线)，会导致路径绘制或者颜色填充等任何意想不到的结果。

　　另外，初学者一定要稍微注意一下closePath()方法，尤其是上面API表中closePath()方法描述中的红色文字。在上面绘制折线的代码示例中，我们首先调用stroke()，然后调用closePath()。其实在调用stroke()方法的时候，已经绘制了折线，并且当前的绘制路径是闭合的，所以再次调用closePath()方法的时候，不会用直线连接当前端点和起始端点(也就是这里的closePath()是可选的，但是为了保持良好的习惯，还是建议写一下)。如果交换stroke()和closePath()的调用顺序，情况就完全不一样了。因为首先调用的是closePath()，此时绘制路径没有闭合，closePath()会用一条直线连接当前端点和起始端点。

　　交换stroke()和closePath()的调用顺序后的示例代码如下：

　　调用顺序交换后，对应的显示效果如下：

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。