先举个简单的例子,

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. 【转载】new和malloc的区别

    本篇随笔为转载,原贴地址:C++中new和malloc的十点区别. 前言 几个星期前去面试C++研发的实习岗位,面试官问了个问题: new与malloc有什么区别? 这是个老生常谈的问题.当时我回答n ...

  2. 怎样增强MyEclipse的代码自动提示功能

    步骤/方法 1 一 般在Eclipse ,MyEclipse代码里面,打个foreach,switch等 这些,是无法得到代码提示的(不信自己试试),其他的就更不用说了,而在Microsoft Vis ...

  3. php生成json或者xml数据

    , ,'数据返回成功',$arr);echo $xml;?>

  4. android 开发 程序中下载安装APK文件 问题汇总 解析程序包时出现问题

    1 若把APK文件保存到应用程序的files目录下,则一定注意保存时使用 FileOutputStream os = openFileOutput(fileName, MODE_WORLD_READA ...

  5. ios 判断相册文件图片大小的方法

    ALAssetsLibrary* alLibrary = [[ALAssetsLibrary alloc] init]; [alLibrary assetForURL:[info objectForK ...

  6. DelphiXE2 DataSnap开发技巧收集

    DelphiXE2 DataSnap开发技巧收集 作者:  2012-08-07 09:12:52     分类:Delphi     标签: 作为DelphiXE2 DataSnap开发的私家锦囊, ...

  7. NET Core1.0之CentOS平台开发控制台程序DEMO

    微软发布NET Core1.0正式版本,并支持了red hat linux平台,所以在CentOS平台,通过编辑器玩下控制器程序. 一.安装.NET Core SDK 先下载SDK并放在指定目录. s ...

  8. sga_target大于sga_max_size数据库无法启动

    环境:oracle 11g 单机 操作过程:由于修改SGA的大小,只修sga_max_size,没有修改sga_target,改导sga_max_size大于sga_target的大小,使得数据库无法 ...

  9. Jquery Mobile示例

    http://www.w3school.com.cn/jquerymobile/jquerymobile_examples.asp

  10. myBatis,Spring,SpringMVC三大框架ssm整合模板

    整合步骤 创建web工程 导入整合所需的所有jar包 编写各层需要的配置文件 1) mybatis的全局配置文件 <configuration>    <!-- 批量别名的设置 -- ...