路径在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. Andrew Ng机器学习课程笔记--week11（图像识别&总结划重点）

    一.内容概要 Photo OCR Problem Decription and pipeline(问题描述和流程图) Sliding Windows(滑动窗口) Getting Lots of Dat ...

  2. weblogic 启动问题

    通过startWebLogic.cmd 手动启动weblogic可以成功启动 myeclipse配置后,runserver 就会报 Error occurred during initializati ...

  3. Django创建模板、URL模式、创建视图函数

    1.在应用目录下创建模板(templates目录) 在模板目录下创建archive.html <!DOCTYPE html> <html lang="en"> ...

  4. 面试题收集---grep和find的区别

    grep是通过文件找内容 find 是通过内容找文件 Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来. 而linux下的find, 在目录结构 ...

  5. win10下移动硬盘位置不可用无法访问

    win10下移动硬盘位置不可用无法访问 网上搜索得到的答案是: 请参考以下步骤解决: 1.按Windows+R输入"CHKDSK H: /F /R"(H:是硬盘所在盘符./R 找到 ...

  6. Http和Socket详解

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp59   这不是同一层的协议 socket是一个针对TCP和UDP编程的借 ...

  7. iOS block和代理的区别

      block和代理是iOS开发中实现回调的两种方式,大多数情况下是用哪个都可以,主要看个人喜好.本文主要是对两者做一下对比. 1.block简介   在 iOS中, block一共分三种.   (1 ...

  8. Angular+ionic2 web端 启动程序出现短暂 白屏或黑屏 的处理小妙招

    在ionic2项目启动是会出现短暂的白屏或者黑屏,虽然很短,但是用户体验不太好.上网查了相关的资料,都是针对打包APP的解决办法,针对浏览器端使用的项目没有效果,所以自己写了样式,巧妙的避开这个问题, ...

  9. 个人作业3—个人总结（Alpha阶段)

    一.个人总结 在Alpha阶段,我们团队通过合作的方式,完成了之前觉得不大可能会完成的事(至少在我看来是这样的),大家其实之前的写代码能力都不太好,这期间大家都是边学边做,边做边学,最后跌跌撞撞的完成 ...

  10. 【Beta阶段】第三次scrum meeting

    Coding/OSChina 地址 1. 会议内容 学号 主要负责的方向 昨日任务 昨日任务完成进度 接下去要做 99 PM 打包上传团队代码 100% 查找适合的素材模块,和105一起把手势功能连接 ...