beginPath() 方法开始一条路径，或重置当前的路径。w3school上的解释！

路径是canvas里很重要的一个概念，刚开始学canvas的人对路径理解不是很深，他们在用canvas的时候会乱用beginPath(),今天做了一个小demo来说明一下路径

  1. <html lang="en-US">
  2. <canvas id=myCanvas width=500px height=500px></canvas>  
  3.  
  4. <script>
  5.     var myCanvas = document.getElementById("myCanvas");
  6.     var context = myCanvas.getContext("2d");  
  7.  
  8.     context.fillStyle = "#e4e4e4";
  9.     context.fillRect(0,0,500,500);  
  10.  
  11.     context.beginPath();  
  12.  
  13.     context.moveTo(100,100);
  14.     context.lineTo(200,100);
  15.     context.strokeStyle = "red";
  16.     context.stroke();  
  17.  
  18.     context.beginPath();
  19.     context.moveTo(100,200);
  20.     context.lineTo(200,200);
  21.     context.strokeStyle = "blue";
  22.     context.stroke();
  23. </script>
  24. </html>

　　如果不对这段代码做改动的话，显示的一条红线和蓝线，大家会想，这有什么好说的呢，肯定是这样啊。

接下来我们把第二个的context.stroke()注释起来，你会发现最后的结果只是一条蓝线，因为第一个路径没有stroke(),紧接着

  1. context.beginPath();

就重新开辟了一个路径，使得只能画了第二个路径的直线，大家是不是发现越来越神奇了呢？

紧接着我把不注释context.stroke()，而把context.beginPath()注释起来，你发现什么了？很奇妙，你发现了一条紫线和蓝线，为什么呢？原来是因为没有开辟新的路径，所以第二个stroke()又重新画了第一条直线，并且用了蓝色，而第一个stroke()已经用红色画了第一条直线了，蓝色和红色的结合就变成了紫色，第二

  1. context.stroke();绘画了蓝色。

你想想，如果把beginPath()和stroke()都注释起来会怎么样呢？两条蓝色的直线，you are good

HTML5 canvas beginPath() 方法的更多相关文章

  1. HTML5 canvas translate() 方法

    HTML5 canvas translate() 方法 translate() 方法重新映射画布上的 (0,0) 位置.

  2. HTML5 canvas clearRect() 方法

    浏览器支持 Internet Explorer 9.Firefox.Opera.Chrome 以及 Safari 支持 clearRect() 方法. 注释:Internet Explorer 8 或 ...

  3. HTML5 canvas getImageData() 方法

    下面的代码通过 getImageData() 复制画布上指定矩形的像素数据,然后通过 putImageData() 将图像数据放回画布: var c=document.getElementById(& ...

  4. 提高HTML5 canvas性能的几种方法

    简介 HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为了web中受到广泛支持的2D快速模式绘图(2Dimmediate mode graphic)的标准.许多开发者现在利 ...

  5. html5 canvas 画图移动端出现锯齿毛边的解决方法

    使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...

  6. HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

    Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...

  7. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  8. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  9. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

随机推荐

  1. 转：面试题：“你能不能谈谈，java GC是在什么时候，对什么东西，做了什么事情？”

    转自:http://jeromecen1021.blog.163.com/blog/static/18851527120117274624888/ 面试题目: 地球人都知道,Java有个东西叫垃圾收集 ...

  2. System.Data.EntityState”在未被引用的程序集中定义

    类型“System.Data.EntityState”在未被引用的程序集中定义.必须添加对程序集“System.Data.Entity, Version=4.0.0.0, Culture=neu 错误 ...

  3. 代码管理 – SVN

    代码管理工具也用了不少年了,整理下. 管理工具比较 用过VSS,CVS,TFS,SVN还有一个微软内部使用的不记得什么名字了.这里进行一些简单比较,重点介绍SVN的用法. CVS历史悠久,1986年就 ...

  4. EJB初识（通熟易懂）

    转载自http://blog.csdn.net/jojo52013145/article/details/5783677,讲的很透彻,佩服,膜拜学习 1. 我们不禁要问,什么是"服务集群&q ...

  5. 用python脚本通过excel生成文件夹树结构

    大概这样写标题是对的吧... 目标: 通过excel目录结构文档生成文件夹树结构. 也就是: 通过下面的excel

  6. ADXL3xx: 读取 ADXL3xx 加速度传感器

    原文链接:https://www.arduino.cc/en/Tutorial/ADXL3xx ADXL3xx加速度传感器 本教程将为你展示如何读取Analog Devices的ADXL3xx系列加速 ...

  7. ubuntu14.04 JDK安装

    JDK7 安装 1 sudo apt-get install openjdk-7-jdk 2 设置安装环境 在/etc/profile中追加: # Java support # export JAVA ...

  8. 从高处理解android与服务器交互（看懂了做开发就会非常的容易）

    今天帮一个朋友改一个bug 他可以算是初学者吧 .我给他看了看代码,从代码和跟他聊天能明显的发现他对客户端与服务器交互 基本 不是很了解.所以我花了更多时间去给他讲客户端与服务器的关系.我觉得从这个高 ...

  9. .NET牛人应该知道些什么

    任何一个使用.NET的人 1.描述线程与进程的区别? 线程(Thread)与进程(Process)二者都定义了某种边界,不同的是进程定义的是应用程序与应用程序之间的边界,不同的进程之间不能共享代 码和 ...

  10. 开发android App干坏事（一）

    最近都是在搞java,android的知识,前两天生日朋友和我聊到,有一个认识的人通过反编译android程序往里面插入广告积分墙赚了很大一笔钱,很短时间内赚了几十万,(为毛感觉这已经是扯淡篇了,转入 ...