守望者--AIR技术交流

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: ANE FlasCC 炼金术
查看: 236|回复: 0

[技术资料] 使用html5 Canvas绘制线条(直线、折线等)

[复制链接]
  • TA的每日心情
    擦汗
    2018-4-10 15:18
  • 签到天数: 447 天

    [LV.9]以坛为家II

    1742

    主题

    2094

    帖子

    13万

    积分

    超级版主

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    威望
    562
    贡献
    29
    金币
    51756
    钢镚
    1422

    开源英雄守望者

    发表于 2016-7-22 17:07:23 | 显示全部楼层 |阅读模式

    本文来源:http://www.365mini.com/page/html5-canvas-draw-line.htm

    注意:本文属于《html5 Canvas绘制图形入门详解》系列文章中的一部分。如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文。请点击上述链接以了解使用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"。你可以点击这里查看lineCap的具体示例,以帮助你更好地理解lineCap
    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来绘制最基本的直线。

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>HTML5 Canvas绘制线条入门示例</title>
    6. </head>
    7. <body>

    8. <!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
    9. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
    10. 您的浏览器不支持canvas标签。
    11. </canvas>

    12. <script type="text/javascript">
    13. //获取Canvas对象(画布)
    14. var canvas = document.getElementById("myCanvas");
    15. //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
    16. if(canvas.getContext){  
    17.     //获取对应的CanvasRenderingContext2D对象(画笔)
    18.     var ctx = canvas.getContext("2d");
    19.    
    20.     //注意,Canvas的坐标系是:Canvas画布的左上角为原点(0,0),向右为横坐标,向下为纵坐标,单位是像素(px)。
    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. </script>
    34. </body>
    35. </html>

    显示效果如下:运行代码

    使用canvas绘制最基本的直线使用canvas绘制最基本的直线

    使用canvas绘制带颜色的直线

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

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

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>HTML5 Canvas绘制线条入门示例</title>
    6. </head>
    7. <body>

    8. <!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
    9. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
    10. 您的浏览器不支持canvas标签。
    11. </canvas>

    12. <script type="text/javascript">
    13. //获取Canvas对象(画布)
    14. var canvas = document.getElementById("myCanvas");
    15. //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
    16. if(canvas.getContext){  
    17.     //获取对应的CanvasRenderingContext2D对象(画笔)
    18.     var ctx = canvas.getContext("2d");  
    19.    
    20.     //开始一个新的绘制路径
    21.     ctx.beginPath();
    22.     //定义直线的起点坐标为(10,10)
    23.     ctx.moveTo(10, 10);
    24.     //定义直线的终点坐标为(50,10)
    25.     ctx.lineTo(50, 10);
    26.     //沿着坐标点顺序的路径绘制直线
    27.     ctx.stroke();
    28.     //关闭当前的绘制路径
    29.     ctx.closePath();

    30.     //绘制一条带颜色的直线
    31.     ctx.moveTo(10, 30);
    32.     ctx.lineTo(50, 30);
    33.     //支持css颜色值的各种表现形式,例如:"blue"、"#0000ff"、"#00f"、"rgb(0,0,255)"、"rgba(0,0,255,1)"
    34.     //颜色等各种设置,必须在最终的绘制函数stroke()之前调用
    35.     ctx.strokeStyle = "blue";
    36.     ctx.stroke();
    37.     //关闭当前的绘制路径
    38.     ctx.closePath();
    39. }
    40. </script>
    41. </body>
    42. </html>

    对应的显示效果如下图:运行代码

    使用canvas绘制的蓝色直线使用canvas绘制的蓝色直线

    使用canvas绘制基本的折线

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

    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>

    对应的显示效果如下图:运行代码

    使用Canvas绘制的折线效果使用Canvas绘制的折线效果

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

    强烈注意:在绘制图形路径时,一定要先调用beginPath()beginPath()方法将会清空内存中之前的绘制路径信息。如果不这样做,对于绘制单个图形可能没什么影响,但是在绘制多个图形时(例如上面示例的两条直线),将会导致路径绘制或者颜色填充等操作出现任何意料之外的结果。

    此外,对于closePath()方法,初学者一定要稍加注意,尤其是上面API表格中closePath()方法描述中的红色文字。在上面绘制折线的代码示例中,我们先调用了stroke(),再调用了closePath()。其实在调用stroke()方法时,折线就已经绘制好了,当前的绘制路径也就被关闭掉了,所以再调用closePath()方法时,它就不会使用直线连接当前端点和起始端点(也就是说,这里的closePath()是可有可无的,不过为了保持良好的习惯,还是建议写上)。如果我们交换一下stroke()closePath()的调用顺序,则情况完全不一样了。由于closePath()先调用,此时绘制路径并没有关闭,那么closePath()将会用直线连接当前端点和起始端点。

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

    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.closePath();
    23.     //最后,按照绘制路径顺序连接各个坐标点
    24.     ctx.stroke();
    25. }
    26. </script>

    交换调用顺序后,对应的显示效果如下:运行代码

    交换调用顺序后的canvas绘制效果交换调用顺序后的canvas绘制效果

    守望者AIR技术交流社区(www.airmyth.com)
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    
    关闭

    站长推荐上一条 /4 下一条

    QQ|手机版|Archiver|网站地图|小黑屋|守望者 ( 京ICP备14061876号

    GMT+8, 2019-10-23 00:14 , Processed in 0.063710 second(s), 31 queries .

    守望者AIR

    守望者AIR技术交流社区

    本站成立于 2014年12月31日

    快速回复 返回顶部 返回列表