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. Android GreenDao清空数据库的方法

    最近在做项目的时候,为了方便测试人员测试,在应用中加入正式库和测试库切换的功能.为了防止正式库和测试库切换带来的数据冲突,切换的时候必须把当前的数据库清空.代码如下: package com.exam ...

  2. java右移>> 无符号右移>>>

    >>>是无符号右移,在高位补零 >>是带符号的右移,如果是正数则在高位补零,负数则补1 int a = -1; System.out.println(a>>1 ...

  3. 百度开源项目插件 - Echarts 图表

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. MyEclipse导入JAVA工程显示红色叉叉的解决方法

    当我们有时候导入一个新的工程的时候可能会出现以下这种情况,基本上是因为jar包路径的问题. 解决方法如下: 1.右击工程,选择properties 2.选择 Java Build Path -> ...

  5. 查看Linux网卡地址,网络地址

    查看网络地址 ip a 或ip addr show 或ifconfig,此指令在部分linux系统中不支持

  6. 特殊矩阵的压缩存储(转自chunlanse2014)

    对称矩阵 对于一个矩阵结构显然用一个二维数组来表示是非常恰当的,但在有些情况下,比如常见的一些特殊矩阵,如三角矩阵.对称矩阵.带状矩阵.稀疏矩阵等,从节约存储空间的角度考虑,这种存储是不太合适的.下面 ...

  7. 119. Pascal's Triangle II (Amazon) from leetcode

    Given a non-negative index k where k ≤ 33, return the kth index row of the Pascal's triangle. Note t ...

  8. IOS 控制当前控制器支持哪些方向

    #pragma mark - 实现这个方法来控制屏幕方向 /** * 控制当前控制器支持哪些方向 * 返回值是UIInterfaceOrientationMask* */ - (NSUInteger) ...

  9. Poj(2236),简单并查集

    题目链接:http://poj.org/problem?id=2236 思路很简单,傻逼的我输出写成了FALL,然后遍历的时候for循环写错了,还好很快我就Debug出来了. #include < ...

  10. OpenACC例子

    timeinfo1.c代码 #include<stdio.h> #define N 100 int main() { int A[N]; #pragma acc kernels { ; i ...