canvas路径和ps里面的路径差不多,在进行图形绘制时,先绘制出来图形的路径,然后再描边或者填充。

canvas路径还有子路径的概念,在某一时刻,canvas之中只能有一条路径存在,Canvas规范将其称为当前路径。然而这条路径可以包含许多子路径。而子路径,又是由两个或者更多的点组成的。

看下面代码

    context.beginPath();

    context.rect(10, 10, 100, 100);
context.stroke(); context.beginPath(); context.rect(50, 50, 100, 100);
context.stroke();

上述代码调用beginPath()来开始一段新的路径,该方法会将当前路径所有子路径清除掉。调用rect()方法会向当前路径增加包含四个点的子路径。stroke()方法将当前路径的轮廓线描绘出来。

如果下一次不调用beginPath(),而是直接调用rect()方法,则会向当前路径添加多条子路径。然后调用stroke()方法,会向多个矩形描边,会重绘第一个矩形。

理解canvas路径的更多相关文章

  1. Canvas路径方向

    使用Canvas路径画图需要注意方向,画图方向是顺时针还是逆时针需要记住.下面让我们看看Canvas常见路径方向. arc 参数值 context.arc(x,y,r,sAngle,eAngle,co ...

  2. Canvas路径、描边、填充

    <script> var context = document.getElementById('canvas').getContext('2d'); context.font = '48p ...

  3. 理解Canvas原理

    Canvas原理 Canvas我们把它翻译成画布,从字面意思我们就可以知道,不就是可以在上面画东西的布吗.好像很简单,没什么好说的.先看图: 从这几幅图我们可以看到以下几点: 1.每个小方格我们可以看 ...

  4. canvas路径绘制

    惯例,先贴代码: 1 /** 2 * Created by Administrator on 2016/1/27. 3 */ 4 function draw (id){ 5 var canvas = ...

  5. 深入理解Canvas Scaler

    Canvas Scaler: 这是一个理解起来相当繁琐复杂的一个组件,但又是一个至关重要的组件,不彻底了解它,可以说对UGUI的布局和所谓的“自适应”就没有一个完整的认识. Canvas Scale指 ...

  6. canvas路径剪切和判断是否在路径内

    1.剪切路径 clip() var ctx=mycanvas.getContext('2d'); ctx.beginPath(); // 建一个矩形路径 ctx.moveTo(20,10) ctx.l ...

  7. html5 canvas路径绘制2

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 理解Canvas像素边界

    大家看下面的例子 var context = document.getElementById('canvas').getContext('2d'); context.lineWidth = 1; co ...

  9. 怎样理解Canvas

    Canvas 是一种在网页中的画布, 是一个HTML5新增的标签, 是一种高效的绘制图形的技术, 在JavaScript中有一个专门的API用于给他赋能( CanvasRenderingContext ...

随机推荐

  1. Cookie存储大小、个数限制

    一.浏览器允许每个域名所包含的cookie数: Microsoft指出InternetExplorer8增加cookie限制为每个域名50个,但IE7似乎也允许每个域名50个cookie. Firef ...

  2. JavaScript流程语句

    循环语句 while 语法 while(条件表达式){ 循环执行代码段 } 流程 1.判断条件表达式的值 2.当值为true时,循环执行代码段 3.当值为false时退出循环体 特性 先检查条件,再执 ...

  3. CSS命名规范(规则)

    常用的CSS命名规则 头:header内容:content/container尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体佈局宽度:wrapper左右中:left ...

  4. Inconsistent accessibility

    Inconsistent accessibility: return type 'ConsoleApplication17.IBacklight' is less accessible than me ...

  5. python模块详解 logging

    打印日志的五个级别: import logging logging.debug('test debug') logging.info('test info') logging.warning('tes ...

  6. sharepoint知识点总结

    { users.Add(value.User); } else { SPGroup group = web.Groups.GetByID(value.LookupId); groups.Add(gro ...

  7. Swagger2:常用注解说明

    Swagger2常用注解说明 Spring Boot : Swagger 2使用教程:https://www.cnblogs.com/JealousGirl/p/swagger.html 这里只讲述@ ...

  8. union和struct的区别之处,在于内存的共享上

    首先看看union,在c++中,union可能没有多大用处,在c语言中,可能我们要借助其完成很多巧妙的设计,下面是其一个完整的定义: union UTest         {             ...

  9. 使用md5的密码加密,处理用户的密码

    需求 1.新增用户保存:使用md5的密码加密,如果用户没有填写密码,设置初始密码“123”: 2.修改用户保存:使用md5的加密加密 *如果修改了密码,需要进行md5的密码加密: *如果没有修改密码, ...

  10. Spark核心组件

    Spark核心组件 1.RDD resilient distributed dataset, 弹性分布式数据集.逻辑上的组件,是spark的基本抽象,代表不可变,分区化的元素集合,可以进行并行操作.该 ...