使用HTML5 Canvas绘制直线或折线等线条的方法讲解

更新时间:2023-04-06 20:34:24 阅读：评论：0

html5 canvas基本概念讲解
html5，这个应该就不需要多作介绍了，只要是开发人员应该都不会陌生。html5是「新兴」的网页技术标准，目前，除ie8及其以下版本的ie浏览器之外，几乎所有主流浏览器(firefox、chrome、opera、safari、ie9+)都已经开始支持html5了。除此之外，在移动浏览器市场上，众多的移动浏览器也纷纷展开关于「html5的支持能力以及性能表现」的军备竞赛。html作为革命性的网页技术标准，再加上众多浏览器厂商或组织的鼎力支持，可以想见，html5将会成为未来网页技术的领头羊。

html5，说其是「新兴」的，其实也不算新了。毕竟，html5早在2008年其第一份正式草案就已经对外公布。从2008年算起，到现在也算是有些年头了。不过，到目前为止，对于大多数开发人员而言，仍然是「雷声大，雨点小」——听说html5的多，实际使用html5的却很少。

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

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

首先，我们需要准备如下html基础代码：

xml/html code
复制内容到剪贴板

<!doctypehtml> <html> <head> <metachart=“utf-8”> <title>html5canvas入门示例</title> </head> <body> </body> </html>

上述代码是一个html5页面的基本代码模板。其中，第一行代码<!doctype html>是一个文档类型标签指令，这也是html5页面的标准文档类型指令，用于告诉浏览器「这是一个html5页面，请按照html5的网页标准来解析显示该页面」。第4行代码<meta chart=”utf-8″>用于告诉浏览器「这个html5页面的字符编码为utf-8」，这也是html5网页设置字符编码的标准写法。这与以往的html字符编码指令有所不同。

xml/html code
复制内容到剪贴板

<!–以往的html字符编码指令如下–> <metahttp-equiv=“content-type”content=“text/html;chart=utf-8”>

现在，我们就在包含上述代码的html文件中进行canvas绘制图形的实例讲解。首先，我们在上述html代码的body部分添加如下canvas标签。

xml/html code
复制内容到剪贴板

<carrot的复数;!doctypehtml> <html> <head> <metachart=“utf-8”> <title>html5canvas入门示例</title> </head> <body> <!–添加canvas标签，并加上红色边框以便于在页面上查看效果–> <canvasid=“mycanvas”width=“400pxῴ万221;height=“300px”style=“border:1pxsolidred;”> 您的浏览器不支持canvas标签。 </canvas> </body> </html>

此时，我们使用支持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/html code
复制内容到剪贴板

<!doctypehtml> <html> <head> <metachart=“utf-8”> <title>html5canvas绘制线条入门示例</title> </head> <body> <!–添加canvas标签，并加上红色边框以便于在页面上查看效果–> <canvasid=“mycanvas”width=“400px”height=“300px”style=“border:1pxsolidred;”> 您的浏览器不支持canvas标签。 </canvas> <scripttype=“text/javascript”> //获取canvas对象(画布) varcanvas=document.getelementbyid(“mycanvas”); //简单地检测当前浏览器是否支持canvas对象，以免在一些不支持html5的浏览器中提示语法错误 if(canvas.getcontext){ //获取对应的canvasrenderingcontext2d对象(画笔) varctx=canvas.getcontext(“2d”); } </script> </body> </html>

如上述代码所示，我们可以使用canvas对象的getcontext()方法来获取canvasrenderingcontext2d对象。比较细心的读者应该注意到了：getcontext()方法需要传入一个字符串——2d，获取到的canvasrenderingcontext2d对象的名称中也带有2d。这是因为，目前html5只支持2d绘图，但是在未来的html5中也可能支持3d或其他形式的绘图。届时，我们可能就需要使用getcontext(“3d”)来获取canvasrenderingcontext3d对象并绘制3d图形了。

使用html5 canvas绘制线条(直线、折线等)
使用html5 canvas绘制直线所需的canvasrenderingcontext2d对象的主要属性和方法(有”()”者为方法)如下：

属性或方法基本描述strokestyle用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个canvasgradient对象或者canvaspattern对象globalalpha定义绘制内容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之间，默认值为1.0。linewidth定义绘制线条的宽度。默认值是1.0，并且这个属性必须大于0.0。较宽的线条在路径上居中，每边各有线条宽的一半。linecap指定线条两端的线帽如何绘制。合法的值是 “butt”、”round”和”square”。默认值是”butt”。 beginpath()开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。它将重置内存中现有的路径。moveto(int x, int y)移动画笔到指定的坐标点(x,y)，该点就是新的子路径的起始点lineto(int x, int y)使用直线连接当前端点和指定的坐标点(x,y)stroke(int x, int y)沿着绘制路径的坐标点顺序绘制直线clopath()如果当前的绘制路径是打开的，则关闭掉该绘制路径。此外，调用该方法时，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭(比如先调用了stroke())或者只有一个点，它会什么都不做。

在canvas的图形绘制过程中，几乎都是先按照一定顺序先定下几个坐标点，也就是所谓的绘制路径，然后再根据我们的需要将这些坐标点用指定的方式连接起来，就形成了我们所需要的图形。当我们了解了canvasrenderingcontext2d对象的上述api后，那么绘制线条就显得非常简单了。

使用canvas绘制基本的直线

现在，我们就使用canvas来绘制最基本的直线。

javascript code
复制内容到剪贴板

<!doctypehtml> <html> <head> <metachart=“utf-8”> <title>html5canvas绘制线条入门示例</title> </head> <body> <!–添加canvas标签，并加上红色边框以便于在页面上查看–> <canvasid=“mycanvas”width=“400px”height=“300px”style=“border:1pxsolidred;”> 您的浏览器不支持canvas标签。 </canvas> <scripttype=“text/javascript”> //获取canvas对象(画布) varcanvas=document.getelementbyid(“mycanvas”); //简单地检测当前浏览器是否支持canvas对象，以免在一些不支持html5的浏览器中提示语法错误 if(canvas.getcontext){ //获取对应的canvasrenderingcontext2d对象(画笔) varctx=canvas.getcontext(“2d”); //注意，canvas的坐标系是：canvas画布的左上角为原点(0,0)，向右为横坐标，向下为纵坐标，单位是像素(px)。 //开始一个新的绘制路径 ctx.beginpath(); //定义直线的起点坐标为(10,10) ctx.moveto(10,10); //定义直线的终点坐标为(50,10) ctx.lineto(50,10); //沿着坐标点顺序的路径绘制直线 ctx.stroke(); compete//关闭当前的绘制路径 ctx.clopath(); } </script> </body> </html>

显示效果如下：

使用canvas绘制带颜色的直线

大家都知道，在现实世界中，画笔也是多种多样的，并且具有各种不同的颜色。同样的，canvas的画笔canvasrenderingcontext2d对象也同样可以具有你所需要的各种颜色。在上面的代码示例中，我们没有指定颜色的话，canvas的画笔就默认为最常见的黑色。

现在我们再次使用canvas的画笔绘制一条蓝色的直线(基于页面简洁考虑，下面只给出关键的javascript代码，请同时参考上面完整的代码示例)。

xml/html code
复制内容到剪贴板

<!doctypehtml> <html> <head> <metachart=“utf-8”> <title>html5canvas绘制线条入门示例</title> </head> <body> <!–添加canvas标签，并加上红色边框以便于在页面上查看–> <canvasid=“mycanvas”width=“400px”height=“300px”style=“border:1pxsolidred;”> 您的浏览器不支持canvas标签。 </canvas> <scripttype=“text/javascript”> //获取canvas对象(画布) varcanvas=document.getelementbyid(“mycanvas”); //简单地检测当前浏览器是否支持canvas对象，以免在man复数形式一些不支持html5的浏览器中提示语法错误 if(canvas.getcontext){ //获取对应的canvasrenderingcontext2d对象(画笔) varctx=canvas.getcontext(“2d”); //开始一个新的绘制路径 ctx.beginpath(); //定义直线的起点坐标为(10,10) ctx.moveto(10,10); //定义直线的终点坐标为(50,10) ctx.lineto(50,10); //沿着坐标点顺序的路径绘制直线 ctx.stroke(); //关闭当前的绘制路径 ctx.clopath(); //绘制一条带颜色的直线 ctx.moveto(10,30); ctx.lineto(50,30); //支持css颜色值的各种表现形式，例如：”blue”、”#0000ff”、”#00f”、”rgb(0,0,255)”、”rgba(0,0,255,1)” //颜色等各种设置，必须在最终的绘制函数stroke()之前调用 ctx.strokestyle=“blue”; ctx.stroke(); //关闭当前的绘制路径 ctx.clopath(); } </script> </body> </html>

对应的显示效果如下图：

使用canvas绘制基本的折线

当我们掌握了canvas绘制直线之后，绘制折线等其他形式的线条就简单多了。我们只需要多绘制几个路径中间点，并依次将它们连接起来即可。

javascript code
复制内容到剪贴板

<scripttype=“text/javascript”> //获取canvas对象(画布) varcanvas=document.getelementbyid(“mycanvas”); //简单地检测当前浏览器是否支持canvas对象，以免在一些不支持html5的浏览器中提示语法错误 if(canvas.getcontext){ //获取对应的canvasrenderingcontext2d对象(画笔) varctx=canvas.getcontext(“2d”); //开始一个新的绘制路径 ctx.beginpath(); //设置线条颜色为蓝色 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.clopath(); } </script>

对应的显示效果如下图：

掌握上述内容后，相信大家对使用canvas绘制线条有一些基本的了解了吧。由于对线条的宽度、透明度等控制只是设置单个属性即可，请参考上面的相关api，这里就不再赘述了。

强烈注意：在绘制图形路径时，一定要先调用beginpath()。beginpath()方法将会清空内存中之前的绘制路径信息。如果不这样做，对于绘制单个图形可能没什么影响，但是在绘制多个图形时(例我和我的祖国手抄报如上面示例的两条直线)，将会导致路径绘制或者颜色填充等操作出现任何意料之外的结果。
此外，对于clopath()方法，初学者一定要稍加注意，尤其是上面api表格中clopath()方法描述中的红色文字。在上面绘制折线的代码示例中，我们先调用了stroke()，再调用了clopath()。其实在调用stroke()方法时，折线就已经绘制好了，当前的绘制路径也就被关闭掉了，所以再调用clopath()方法时，它就不会使用直线连接当前端点和起始端点(也就是说，这里的clopath()是可有可无的，不过为了保持良好的习惯，还是建议写上)。如果我们交换一下stroke()和clopath()的调用顺序，则情况完全不一样了。由于clopath()先调用，此时绘制路径并没有关闭，那么clopath()将会用直线连接当前端点和起始端点。

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

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

本文发布于:2023-04-06 20:34:22，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/fanwen/zuowen/a1dc70954df85dc89e54d65af7b97cb1.html

本文word下载地址：使用HTML5 Canvas绘制直线或折线等线条的方法讲解.doc

本文 PDF 下载地址：使用HTML5 Canvas绘制直线或折线等线条的方法讲解.pdf

上一篇：CI框架验证码CAPTCHA辅助函数用法实例

下一篇：返回列表