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


Posted in HTML / CSS onMarch 14, 2016

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复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>HTML5 Canvas入门示例</title>  
  6. </head>  
  7. <body>  
  8.   
  9. </body>  
  10. </html>  

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

XML/HTML Code复制内容到剪贴板
  1. <!-- 以往的html字符编码指令如下 -->  
  2. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>HTML5 Canvas入门示例</title>  
  6. </head>  
  7. <body>  
  8.   
  9. <!-- 添加canvas标签,并加上红色边框以便于在页面上查看效果 -->  
  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">  
  11. 您的浏览器不支持canvas标签。   
  12. </canvas>  
  13.   
  14. </body>  
  15. </html>  

此时,我们使用支持html5的浏览器打开该页面,将会看到如下内容:
使用HTML5 Canvas绘制直线或折线等线条的方法讲解

在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复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>HTML5 Canvas绘制线条入门示例</title>  
  6. </head>  
  7. <body>  
  8.   
  9. <!-- 添加canvas标签,并加上红色边框以便于在页面上查看效果 -->  
  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">  
  11. 您的浏览器不支持canvas标签。   
  12. </canvas>  
  13.   
  14. <script type="text/javascript">  
  15. //获取Canvas对象(画布)   
  16. var canvas = document.getElementById("myCanvas");   
  17.   
  18. //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误   
  19. if(canvas.getContext){   
  20.     //获取对应的CanvasRenderingContext2D对象(画笔)   
  21.     var ctx = canvas.getContext("2d");   
  22. }   
  23. </script>  
  24. </body>  
  25. </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) 沿着绘制路径的坐标点顺序绘制直线
closePath() 如果当前的绘制路径是打开的,则关闭掉该绘制路径。此外,调用该方法时,它会尝试用直线连接当前端点与起始端点来关闭路径,但如果图形已经关闭(比如先调用了stroke())或者只有一个点,它会什么都不做。

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

使用canvas绘制基本的直线

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

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4. <meta charset="UTF-8">   
  5. <title>HTML5 Canvas绘制线条入门示例</title>   
  6. </head>   
  7. <body>   
  8.   
  9. <!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->   
  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">   
  11. 您的浏览器不支持canvas标签。   
  12. </canvas>   
  13.   
  14. <script type="text/javascript">   
  15. //获取Canvas对象(画布)   
  16. var canvas = document.getElementById("myCanvas");   
  17. //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误   
  18. if(canvas.getContext){     
  19.     //获取对应的CanvasRenderingContext2D对象(画笔)   
  20.     var ctx = canvas.getContext("2d");   
  21.        
  22.     //注意,Canvas的坐标系是:Canvas画布的左上角为原点(0,0),向右为横坐标,向下为纵坐标,单位是像素(px)。   
  23.        
  24.     //开始一个新的绘制路径   
  25.     ctx.beginPath();   
  26.     //定义直线的起点坐标为(10,10)   
  27.     ctx.moveTo(10, 10);   
  28.     //定义直线的终点坐标为(50,10)   
  29.     ctx.lineTo(50, 10);   
  30.     //沿着坐标点顺序的路径绘制直线   
  31.     ctx.stroke();   
  32.     //关闭当前的绘制路径   
  33.     ctx.closePath();   
  34. }   
  35. </script>   
  36. </body>   
  37. </html>  

显示效果如下:
使用HTML5 Canvas绘制直线或折线等线条的方法讲解

使用canvas绘制带颜色的直线

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

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>HTML5 Canvas绘制线条入门示例</title>  
  6. </head>  
  7. <body>  
  8.   
  9. <!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->  
  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">  
  11. 您的浏览器不支持canvas标签。   
  12. </canvas>  
  13.   
  14. <script type="text/javascript">  
  15. //获取Canvas对象(画布)   
  16. var canvas = document.getElementById("myCanvas");   
  17. //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误   
  18. if(canvas.getContext){     
  19.     //获取对应的CanvasRenderingContext2D对象(画笔)   
  20.     var ctx = canvas.getContext("2d");     
  21.        
  22.     //开始一个新的绘制路径   
  23.     ctx.beginPath();   
  24.     //定义直线的起点坐标为(10,10)   
  25.     ctx.moveTo(10, 10);   
  26.     //定义直线的终点坐标为(50,10)   
  27.     ctx.lineTo(50, 10);   
  28.     //沿着坐标点顺序的路径绘制直线   
  29.     ctx.stroke();   
  30.     //关闭当前的绘制路径   
  31.     ctx.closePath();   
  32.   
  33.     //绘制一条带颜色的直线   
  34.     ctx.moveTo(10, 30);   
  35.     ctx.lineTo(50, 30);   
  36.     //支持css颜色值的各种表现形式,例如:"blue"、"#0000ff"、"#00f"、"rgb(0,0,255)"、"rgba(0,0,255,1)"   
  37.     //颜色等各种设置,必须在最终的绘制函数stroke()之前调用   
  38.     ctx.strokeStyle = "blue";    
  39.     ctx.stroke();   
  40.     //关闭当前的绘制路径   
  41.     ctx.closePath();   
  42. }   
  43. </script>  
  44. </body>  
  45. </html>  

对应的显示效果如下图:
使用HTML5 Canvas绘制直线或折线等线条的方法讲解

使用canvas绘制基本的折线

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

JavaScript Code复制内容到剪贴板
  1. <script type="text/javascript">   
  2. //获取Canvas对象(画布)   
  3. var canvas = document.getElementById("myCanvas");   
  4. //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误   
  5. if(canvas.getContext){     
  6.     //获取对应的CanvasRenderingContext2D对象(画笔)   
  7.     var ctx = canvas.getContext("2d");     
  8.        
  9.     //开始一个新的绘制路径   
  10.     ctx.beginPath();   
  11.     //设置线条颜色为蓝色   
  12.     ctx.strokeStyle = "blue";   
  13.     //设置路径起点坐标   
  14.     ctx.moveTo(20, 50);   
  15.     //定义中间点坐标1   
  16.     ctx.lineTo(60, 50);   
  17.     //定义中间点坐标2   
  18.     ctx.lineTo(60, 90);   
  19.     //定义中间点坐标3(这是最后一个中间点,也就是终点)   
  20.     ctx.lineTo(100, 90);   
  21.     //按照绘制路径顺序连接各个坐标点   
  22.     ctx.stroke();   
  23.     //关闭绘制路径   
  24.     ctx.closePath();   
  25. }   
  26. </script>  

对应的显示效果如下图:
使用HTML5 Canvas绘制直线或折线等线条的方法讲解

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

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

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

交换调用顺序后,对应的显示效果如下:
使用HTML5 Canvas绘制直线或折线等线条的方法讲解 

HTML / CSS 相关文章推荐
HTML5 CSS3给网站设计带来出色效果
Jul 16 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
纯css3制作网站后台管理面板
Dec 30 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 #HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 #HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 #HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 #HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 #HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 #HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 #HTML / CSS
You might like
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
生成sessionid和随机密码的例子
2006/10/09 PHP
Zend的AutoLoad机制介绍
2012/09/27 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
php创建无限级树型菜单
2015/11/05 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
javascript prototype原型操作笔记
2009/12/07 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
javascript闭包入门示例
2014/04/30 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
python统计cpu利用率的方法
2015/06/02 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Python 如何对文件目录操作
2020/07/10 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
商得四方公司面试题(gid+)
2014/04/30 面试题
电子商务专业个人的自我评价分享
2013/10/29 职场文书
大学生村官事迹材料
2014/01/21 职场文书
入党推优材料
2014/06/02 职场文书
升职自荐书
2019/05/09 职场文书
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python