先举个简单的例子,

var myCanvas = document.getElementById("myCanvas");
var context= myCanvas.getContext("2d");

context.beginPath();
context.moveTo(150, 50);
context.lineTo(250, 50);
context.strokeStyle = "green";
context.stroke();

context.beginPath();
context.moveTo(150, 80);
context.lineTo(250, 80);
context.strokeStyle = "yellow";
context.stroke();

context.beginPath();
context.moveTo(150, 100);
context.lineTo(250, 100);
context.strokeStyle = "blue";
context.stroke();

这个例子会从上向下依次绘制三条横线,效果如图:

假如去掉第三个beginPath()方法,会发现第三条线的颜色同时也绘制到第二条黄线上,这就发现beginPath()方法会让图形在绘制时重新找到开始点绘制而不会和之前的绘图重叠,加上他还是很必须的。

canvas beginPath()的更多相关文章

  1. HTML5 canvas beginPath() 方法

    beginPath() 方法开始一条路径,或重置当前的路径.w3school上的解释! 路径是canvas里很重要的一个概念,刚开始学canvas的人对路径理解不是很深,他们在用canvas的时候会乱 ...

  2. HTML5新增Canvas标签及对应属性、API详解(基础一)

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  3. html5 canvas+js实现ps钢笔抠图

    html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...

  4. 关于canvas画布使用fillRect()时高度出现双倍效果解决办法

    当设置canvas的宽度和高度时,只有内嵌css有效,外部css会出现拉伸的情况,例如: <!DOCTYPE html> <html lang="en"> ...

  5. 基于canvas的电子始终

    //code <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  6. HTML5 Canvas 小例子 旋转的时钟

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. HTML5 Canvas 小例子 简易画板

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. html5 canvas时钟

    基础知识点:                canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上 ...

  9. html5 canvas+js实现ps钢笔抠图(速抠图 www.sukoutu.com)

    html5 canvas+js实现ps钢笔抠图(速抠图 www.sukoutu.com)   根据html5 canvas+js实现ps钢笔抠图的实现,aiaito 开发者开发了一套在线抠图工具,速抠 ...

随机推荐

  1. Hex string convert to Binary String and Vise-Versa(16进制和2进制字符串的相互转换)

    这个转换在我们日常的编码中还是很有机会遇到的,这里贴出来和大家分享探讨. void pu_hex_to_binary(std::string strHex, std::string &strB ...

  2. (转)javascript异步编程的四种方法

    本文转自:http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html 作者:阮一峰 本文仅仅作为个人mark ...

  3. hive中rcfile格式(收藏文)

    首先声明,此文是属于纯粹收藏文,感觉讲的很不错. 本文介绍了Facebook公司数据分析系统中的RCFile存储结构,该结构集行存储和列存储的优点于一身,在MapReduce环境下的大规模数据分析中扮 ...

  4. 关于VS快捷键的使用总结

    首先快捷键是为了快,不能为了用快捷键而用快捷键. 既然说到快,我个人认为要涉及到一个使用频率问题,如果一个功能的快捷键使用频率极高,那么就应该把它调到触手可及的位置, 如:经常看别人源代码,经常会使用 ...

  5. 【转】 C# 小技巧之获取变量名称

    link: http://www.cnblogs.com/gongy/p/lm-2015-04-03.html 今天在自我规范程序设计的时候,变量名匹配字符串来自配置文件,网上找了一会儿发现也有朋友在 ...

  6. DataSet读取数据

    using System.Data; using System.Data.SqlClient; namespace ConsoleApplication3 { class Program { stat ...

  7. 发邮件 和 excel导出中文文件名

    /** * 发邮件 * @param email * @param subject * @param body * @throws UnsupportedEncodingException */ pu ...

  8. PHP form 表单传参明细研究

    GET表单: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  9. 发现IE7的一个问题,不能用索引取字符串中的单个字符

    如下javascript: var testValue="hello,world"; alert(testValue[]); 在IE7上运行该代码,竟然提示值为"unde ...

  10. mysql 存储过程 游标 判断游标是否为空

    BEGIN DECLARE id long; DECLARE Done INT DEFAULT 0; DECLARE cashamount DECIMAL(10,2) DEFAULT 0.00; DE ...