路径方法

fill()                                填充当前绘图(路径)
stroke()                        绘制已定义的路径
beginPath()                起始一条路径,或重置当前路径
moveTo()                        把路径移动到画布中的指定点,不创建线条
closePath()                        创建从当前点回到起始点的路径
lineTo()                        添加一个新点,然后在画布中创建从该点到最后指定点的线条
clip()                                从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo(cpx,cpy,x,y)        创建二次贝塞尔曲线
quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点,向当前路径添加一个点。
二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点,第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
       

开始点:moveTo(20,20)
    控制点:quadraticCurveTo(20,100,200,20)
    结束点:quadraticCurveTo(20,100,200,20)
cpx         贝塞尔控制点的 x 坐标
cpy         贝塞尔控制点的 y 坐标
x         结束点的 x 坐标
y         结束点的 y 坐标

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)                创建三次方贝塞尔曲线
bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点,向当前路径添加一个点。
三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点,第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
       

开始点:moveTo(20,20)
    控制点 1:bezierCurveTo(20,100,200,100,200,20)
    控制点 2:bezierCurveTo(20,100,200,100,200,20)
    结束点:bezierCurveTo(20,100,200,100,200,20)
cp1x         第一个贝塞尔控制点的 x 坐标
cp1y         第一个贝塞尔控制点的 y 坐标
cp2x         第二个贝塞尔控制点的 x 坐标
cp2y         第二个贝塞尔控制点的 y 坐标
x         结束点的 x 坐标
y         结束点的 y 坐标

arc(x,y,r,sAngle,eAngle,counterclockwise)                                创建弧/曲线(用于创建圆形或部分圆)
arc() 方法创建弧/曲线(用于创建圆或部分圆)。
如需通过 arc() 来创建圆,请把起始角设置为 0,结束角设置为 2*Math.PI。
       

中心:arc(100,75,50,0*Math.PI,1.5*Math.PI)
    起始角:arc(100,75,50,0,1.5*Math.PI)
    结束角:arc(100,75,50,0*Math.PI,1.5*Math.PI)
x         圆的中心的 x 坐标。
y         圆的中心的 y 坐标。
r         圆的半径。
sAngle         起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。
eAngle         结束角,以弧度计。
counterclockwise         可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。

arcTo(x1,y1,x2,y2,r)                        创建两切线之间的弧/曲线
x1         弧的起点的 x 坐标
y1         弧的起点的 y 坐标
x2         弧的终点的 x 坐标
y2         弧的终点的 y 坐标
r         弧的半径

isPointInPath()                如果指定的点位于当前路径中,则返回 true,否则返回 false

<canvas id="d" width="500" height="450" style="border:1px solid #000"></canvas>
<script type="text/javascript">
var a=document.getElementById("d");
var ctx=a.getContext("2d");
ctx.beginPath(); //起始一条路径,或重置当前路径
ctx.moveTo(20,20); //把路径移动到画布中的指定点,不创建线条
ctx.lineTo(20,120); //添加一个新点,然后在画布中创建从该点到最后指定点的线条
ctx.lineTo(90,120);
ctx.closePath(); //创建从当前点回到起始点的路径
ctx.stroke(); //绘制已定义的路径
ctx.fillStyle="green";
ctx.fill(); //填充当前绘图(路径) ctx.beginPath();
ctx.moveTo(20,150);
ctx.quadraticCurveTo(20,250,200,150); //创建二次贝塞尔曲线
ctx.stroke(); ctx.beginPath();
ctx.moveTo(20,350)
ctx.bezierCurveTo(20,400,200,400,200,350); //创建三次方贝塞尔曲线
ctx.stroke(); ctx.beginPath();
ctx.arc(300,200,20,0,1.5*Math.PI); //创建弧/曲线(用于创建圆形或部分圆)
ctx.stroke(); ctx.beginPath();
ctx.moveTo(300,280);
ctx.lineTo(350,280);
ctx.arcTo(400,280,400,330,50); //创建两切线之间的弧/曲线
ctx.lineTo(400,380);
ctx.stroke(); ctx.rect(400,20,50,50);
if(ctx.isPointInPath(401,20)){ //如果指定的点位于当前路径中,则返回 true,否则返回 false
ctx.stroke();
} ctx.rect(150,20,200,120);
ctx.stroke();
ctx.clip(); //从原始画布剪切任意形状和尺寸的区域
ctx.fillStyle="green";
ctx.fillRect(0,0,250,100);
</script>

HTML5 canvas中的路径方法的更多相关文章

  1. HTML5 Canvas中实现绘制一个像素宽的细线

    正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...

  2. HTML5 canvas绘图基本使用方法

    <canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingCon ...

  3. HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

    Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...

  4. c#中获取路径方法

    要在c#中获取路径有好多方法,一般常用的有以下五种: //获取应用程序的当前工作目录. String path1 = System.IO.Directory.GetCurrentDirectory() ...

  5. HTML5 Canvas中绘制椭圆的几种方法

    1.canvas自带的绘制椭圆的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是后来 ...

  6. HTML5 Canvas 中的颜色、样式和阴影的属性和方法

    颜色.样式和阴影的属性与方法 fillStyle                设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle         设置或返回用于笔触的颜色.渐变或模式 ...

  7. html5 canvas中CanvasGradient对象用法

    html5 中canvas提供了强大的渲染样式,可以实现一些比较复杂的样式设置,今天学习了CanvasGradient对象可以实现一个颜色的渐变 CanvasGradient对象可以实现两种不同形式的 ...

  8. 用HTML5 CANVAS做自定义路径的动态效果图片!

    最近对HTML5开始感兴趣了,实现的效果如下图,大家可以从代码里换掉图片 我用的是canvas里面的2d绘图,其中上图的路径是网上在线绘制的,我太懒了,哈哈 下面是网址: http://www.vic ...

  9. HTML5 canvas 中的线条样式

    线条样式属性 lineCap        设置或返回线条的结束端点样式 butt         默认.向线条的每个末端添加平直的边缘. round         向线条的每个末端添加圆形线帽. ...

随机推荐

  1. BZOJ 2434 阿狸的打字机

    http://www.lydsy.com/JudgeOnline/problem.php?id=2434 思路:建立fail树,并找出dfs序,那剩下要做的就是每次找到一个串的位置,然后询问它的区间里 ...

  2. EMS-keil C51常用错误

    1. LAB100.C(12): error C216: subscript on non-array or too many dimensions 原程序如下: #include <reg51 ...

  3. 理解和使用NT驱动程序的执行上下文

    理解Windows NT驱动程序最重要的概念之一就是驱动程序运行时所处的“执行上下文”.理解并小心地应用这个概念可以帮助你构建更快.更高效的驱动程序. NT标准内核模式驱动程序编程的一个重要观念是某个 ...

  4. 收藏maven错误

    错误原因: 编译下载最新的maven源代码,但是出现错误.错误如下: [WARNING] Some problems were encountered while building the effec ...

  5. C#实现数据结构——线性表(上)

    什么是线性表 数据结构中最常用也最简单的应该就是线性表,它是一种线性结构(废话,不是线性结构怎么会叫线性表?当然不是废话,古人公孙龙就说白马非马,现代生物学家也说鲸鱼不是鱼). 那什么是线性结构? 按 ...

  6. Oracle 数据库基本操作——表操作:查询

    目录: 1.基本查询 2.多表查询 3.多行查询 4.集合查询 2.连接 3.嵌套查询 1.基本查询 语法: select column|others{,columnName|others} from ...

  7. 简单的jQuery日期选择

    建立一个存放日期的文本框 点击文本框弹出一个选择框引用jQuery文件引用bootstrap文件 使用模态框 使用模态框的方法设置点击文本框显示模态框手动打开模态框的方法:$('id').modal( ...

  8. django 执行原始SQL

    二.知识点总结 When the model query APIs don’t go far enough, you can fall back to writing raw SQL. go far ...

  9. [Protractor] Test Simple Binding With Protractor

    Protractor is built to interact with AngularJS applications. In this lesson, we will take a look at ...

  10. Linux查看代码量

    利用find  xargs  wc可方便的计算出某个目录下源文件的代码量find sourcecode_dir_path -type f -name "*.c" -print0 | ...