HTML5 Canvas 起步(2) - 路径
作者:xujiwei 来源:xujiwei博客 发布时间:2009-05-12 12:06:00
上一篇介绍了 HTML5 中 Canvas 的基本概念,这篇将要介绍一下 Canvas 中的基本图形。
图形的基础 - 路径
在 Canvas 中,所有基本图形都是以路径为基础的,也就是说,我们在调用 2dContext 的 lineTo、rect 等方法时,其实就是往已经的 context 路径集合中再添加一些路径点,在最后使用 fill 或 stroke 方法进行绘制时,都是依据这些路径点来进行填充或画线。
在每次开始绘制路径前,都应该使用 context.beginPath() 方法来告诉 Context 对象开始绘制一个新的路径,否则接下来绘制的路径会与之前绘制的路径叠加,在填充或画边框时就会出现问题。在绘制完成路径后,可以直接使用 context.closePath() 方法来关闭路径,或者手动关闭路径。另外,如果在填充时路径没有关闭,那么 Context 会自动调用 closePath 方法将路径关闭。
基本路径方法
1. beginPath, closePath
这两个方法在前面已经介绍过,分别用来通知 Context 开始一个新的路径和关闭当前的路径。
在 Canvas 中使用路径时,应该要保持一个良好的习惯,每次开始绘制路径前都要调用一次 beginPath 方法,否则画出来的效果难看不说,还会严重影响性能。
在下面这张图中,左边的图形在每次绘制矩形前都调用了一次 beginPath 来清除之前的路径并重新开始绘制新的路径,而后面的图形则就只在绘制所有图形前调用了一次 beginPath 来清除路径,因此,虽然这里是使用的边框色是 #666,但是右边的图形颜色比左边的深一些,因为每次使用 stroke 绘制边框时,会把之前的路径再次绘制一遍,叠加起来颜色就比原来深一些。
在 Context 中路径数较少时,如果不考虑显示效果,性能上还可以接受,但是如果 Context 中的路径数很多时,在开始绘制新路径前不使用 beginPath 的话,因为每次绘制都要将之前的路径重新绘制一遍,这时性能会以指数下降。
因此,除非有特殊需要,每次开始绘制路径前都要调用 beginPath 来开始新路径。
猜你喜欢
- (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ )之前js 仿Photoshop
- 有时候我们需要在某段字符串或者某段语句中去查找确认是否包含我们所需要的字符串信息,举例子说、某段变量是:A= ”My name is Cla
- 有时需要读取jpg图像的长和宽,tensorflow提供了很好的支持直接上示例decode_jpeg_data = tf.placehold
- 还是分析一下大体的流程:首先还是Chrome浏览器抓包分析元素,这是网址:https://www.douyu.com/directory/a
- 前言删除数据表的时候,表的定义和表中所有的数据均会被删除。因此,在进行删除操作前,最好对表中的数据做一个备份,以免造成无法挽回的后果。mys
- 与Python标准库模块命名冲突Python的一个优秀的地方在于它提供了丰富的库模块。但是这样的结果是,如果你不下意识的避免,很容易你会遇到
- 本文实例讲述了MySQL数据库入门之多实例配置方法。分享给大家供大家参考,具体如下:前面介绍了相关的基础命令操作:MySQL数据库基础篇之入
- 继承与threading.Thread实现有返回值的子类MyThread,废话不多说,大家直接看代码import threadingclas
- 本文实例讲述了Go语言转换所有字符串为大写或者小写的方法。分享给大家供大家参考。具体如下:Go语言的string模块包含了ToLower和T
- 问题:数据库附加.mdf文件时,提示无法打开物理文件,操作系统错误5:"5(拒绝访问)" 错误:5120。解决方案: 数
- Web 设计离不开调色板,现成的调色板多不胜数,不管是 Windows 标准色板,还是 Web 标准色板,还是 Pantone 色板,它们虽
- 最近在看python的算法书,之前在年前买的书,一直在工作间隙的时候,学习充电,终于看到这本书,但是确实又有点难,感觉作者写的代码太炫技 了
- 首先,eval模式和train模式得到不同的结果是正常的。我的模型中,eval模式和train模式不同之处在于Batch Normaliza
- 在用户执行粘贴操作的时候,js能够获得剪切板的内容,本文讨论一下这个问题。目前只有Chrome支持获取剪切板中的图片数据。还好需要这个功能的
- 大家好,今天来学习用Flask API创建Python后台任务。在Python中,有若干解决方案可以实现后台任务,比如Celery或Redi
- 目录需求分析进一步分析再进一步分析代码实现我们在写爬虫的过程中,除了研究反爬之外,几乎全部的时间都在写解析逻辑。那么,生命苦短,为什么我们不
- 简介说明本文介绍Vue的动态组件的用法。在Vue中,可以通过component标签的is属性动态指定标签,例如:<component
- 主函数(Main Function)是程序中最重要的部分之一,它是程序入口点,也是程序开始执行的地方。1、主函数的定义在 Python 中,
- nginx简单配置php服务(多个)摘要:大部分网站开发语言都要运行在服务器,比如主流的nginx、apache等等,部署服务器环境对于大部
- 链表由一系列不必在内存中相连的结构构成,这些对象按线性顺序排序。每个结构含有表元素和指向后继元素的指针。最后一个单元的指针指向NULL。为了