路径在canvas绘图中，经常被用到，是一个非常重要的概念.

比如：我们要在canvas画出3条直线，要求用不同的颜色加以区分.

 <style>

 body {

     background: #000;

 }

 #canvas{

     background:white;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' );

         oGc.strokeStyle = 'red';

         oGc.moveTo( 50, 50 );

         oGc.lineTo( 500, 50 );

         oGc.stroke();

         oGc.strokeStyle = 'orange';

         oGc.moveTo( 50, 150 );

         oGc.lineTo( 500, 150 );

         oGc.stroke();

         oGc.strokeStyle = 'yellow';

         oGc.moveTo( 50, 250 );

         oGc.lineTo( 500, 250 );

         oGc.stroke();

 }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="600" height="300"></canvas>

 </body>

在画每一条线之前，我都用storeStyle设置了线的颜色，但是，出来的结果却是3条黄色的线，并不是红、橙、黄三条颜色不同的线。为什么呢？

首先我们要搞清楚canvas渲染图形，它是基于状态的，所谓状态就是每一次用( stroke/fill )之类的API渲染图形的时候，canvas会检查整个程序定义的( strokeStyle, fillStyle, lineWidth等 ）当一个状态值没有被改变时，canvas就一直用这个状态。如果被改变，这里就要注意了：

1，如果使用beginPath()开始一个新的路径，则不同路径使用当前路径的值

2，如果没有使用beginPath()开始一个新的路径，后面的会覆盖前面的.

而我们这个程序就是属于第2种情况，尽管strokeStyle被改变了，但是没有用beginPath()开启新路径，所以前面两个strokeStyle会被最后一个strokeStyle='yellow'覆盖。所以3条线都是黄色.

看完这段解释，你应该知道怎样修改了吧？

只需要把每条线设置在不同的路径中，就可以区分了

 <style>

 body {

     background: #000;

 }

 #canvas{

     background:white;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' );

         oGc.beginPath();

         oGc.strokeStyle = 'red';

         oGc.moveTo( 50, 50 );

         oGc.lineTo( 500, 50 );

         oGc.stroke();

         oGc.beginPath();

         oGc.strokeStyle = 'orange';

         oGc.moveTo( 50, 150 );

         oGc.lineTo( 500, 150 );

         oGc.stroke();

         oGc.beginPath();

         oGc.strokeStyle = 'yellow';

         oGc.moveTo( 50, 250 );

         oGc.lineTo( 500, 250 );

         oGc.stroke();

 }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="600" height="300"></canvas>

 </body>

closePath：关闭路径

所谓关闭路径就是：指的是将同一个路径中的起点与终点相连接.

比如，我们画个三角形，不使用路径的时候，我们这样做：

 <style>

 body {

     background: #000;

 }

 #canvas{

     background:white;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' );

     oGc.moveTo( 50, 50 );

     oGc.lineTo( 250, 50 );

     oGc.lineTo( 250, 150 );

     oGc.lineTo( 50, 50 );

     oGc.stroke();

 }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="600" height="300"></canvas>

 </body>

最后一次用lineTo( 50, 50 )连接到起点，如果我们使用closePath，就不需要这一步操作了.

 <style>

 body {

     background: #000;

 }

 #canvas{

     background:white;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' );

     oGc.moveTo( 50, 50 );

     oGc.lineTo( 250, 50 );

     oGc.lineTo( 250, 150 );

     oGc.closePath();

     oGc.stroke();

 }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="600" height="300"></canvas>

 </body>

在stroke之前，用closePath关闭路径，他就会把（ 250， 150）这个点和起始点( 50, 50 )连接起来.

画2个三角形：

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' );

     oGc.moveTo( 50, 50 );

     oGc.lineTo( 250, 50 );

     oGc.lineTo( 250, 150 );

     oGc.closePath();

     oGc.stroke();

     oGc.moveTo( 50, 150 );

     oGc.lineTo( 250, 150 );

     oGc.lineTo( 250, 250 );

     oGc.closePath();

     oGc.stroke();

使用路径，绘制两个不同颜色的三角形：

 <style>

 body {

     background: #000;

 }

 #canvas{

     background:white;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' );

     //这段oGc.beginPath可有可无，不会影响结果，但是建议加上，代码可读性比较好一点

     oGc.beginPath();

     oGc.strokeStyle = 'red';

     oGc.moveTo( 50, 50 );

     oGc.lineTo( 250, 50 );

     oGc.lineTo( 250, 150 );

     oGc.closePath();

     oGc.stroke();

     oGc.beginPath();

     oGc.strokeStyle = '#09f';

     oGc.moveTo( 50, 150 );

     oGc.lineTo( 250, 150 );

     oGc.lineTo( 250, 250 );

     oGc.closePath();

     oGc.stroke();

 }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="600" height="300"></canvas>

 </body>

[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解的更多相关文章

  1. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

  2. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  3. [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

    绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...

  4. [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

  5. [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

    接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...

  6. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

  7. [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

    接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...

  8. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  9. [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

随机推荐

  1. winform WebBrowser控件中，cs后台代码执行动态生成的js

    很多文章都是好介绍C# 后台cs和js如何交互,cs调用js方法(js方法必须是页面上存在的,已经定义好的),js调用cs方法, 但如果想用cs里面执行动态生成的js代码,如何实现呢? 思路大致是这样 ...

  2. Redis使用记录-相关资料汇总

    1 redis在centos上的安装 http://www.cnblogs.com/hanyinglong/p/5036558.html 2 redis在windows上的可视化GUI工具 https ...

  3. SpringMVC + Mybatis bug调试 SQL正确，查数据库却返回NULL

    今天碰到个bug,有点意思 背景是SpringMVC + Mybatis的一个项目,mapper文件里写了一条sql 大概相当于 select a from tableA where b = &quo ...

  4. hibernate的基本配置

    1   Hibernate是一个非侵入式的ORMapping的框架. 2   Hibernate是一个能够将JAVA对象  通过   映射关系    映射到   关系型数据库的  这样一个框架 Hib ...

  5. pip源相关问题

    指定源地址安装: pip install -i http://pypi.douban.com/simple/ packagename pip install -i http://pypi.tuna.t ...

  6. C#格式符

    在输出字符串时,使用格式说明  使字符串显示适当的格式,比如:货币格式,或者科学计数法.百分比等. 以下是格式化的数字字符串  格式. {index, alignment: format} 例如: ; ...

  7. ABP从入门到精通（6）：快速重命名解决方案

    SolutionRenamer SolutionRenamer 是一个解决方案快速重命名工具.经测试重命名一个全新asp.net zero core项目(ABP asp.net zero,.net c ...

  8. http长连接与短连接

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp23 http长连接与短连接 一.长连接与短连接: 长连接:client方与 ...

  9. 0908期 HTML 样式表属性

    1.背景与前景    /*背景色,样式表优先级高*/ background-image:url(路径);    /*设置背景图片(默认)*/ background-attachment:fixed;  ...

  10. 误删libc.os.6共享库的解决办法

    在我们使用系统的过程中,要注意各个共享库的使用,万一不小心删掉了什么,就可能出现各种问题.如果你把libc.os.6删掉了,那可就悲剧了,因为你的大部分命令都不能够正常使用了(╥╯^╰╥) 接下来呢, ...