路径方法

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. LED驅動芯片最大特點

    最大特點是: 1.電源電壓在很寬的範圍內工作時,(約180V-265V)能保證 LED的恒功率輸出,並且 LED可實現無頻閃輸出. 2.實現安全隔離的安全電壓輸出,甚至是安全超低電壓輸出. 3.IC2 ...

  2. 使用Windows 系统性能监控来报警磁盘空间不足

    http://blog.csdn.net/jiangxinyu/article/details/4370288

  3. Microsoft Detours 2.1简介

    http://blog.163.com/qcb_163/blog/static/9545466420117851038971/ Microsoft Detours 2.1简介 2011-08-0817 ...

  4. ASP.NET MVC 5使用CrystalReport(水晶报表)

    原文:ASP.NET MVC 5使用CrystalReport(水晶报表)   http://downloads.businessobjects.com/akdlm/cr4vs2010/CRforVS ...

  5. CSS伪元素before和after

    今天发现很多国外的网站和框架设计都用到了before和after,之前使用的比较少,今天试了下觉得还是很有意思的~ 说明 1. :before 和 :after将在内容元素的前后插入额外的元素::be ...

  6. SharePoint Server 2010安装图解

    SharePoint Server 2010作为MOSS 2007的升级版本,自从2009年底发布Beta版本以来就备受关注,网络上已经出现了很多相关的文章,其中也不乏中文的信息. 最近SharePo ...

  7. QR分解

        从矩阵分解的角度来看,LU和Cholesky分解目标在于将矩阵转化为三角矩阵的乘积,所以在LAPACK种对应的名称是trf(Triangular Factorization).QR分解的目的在 ...

  8. 金洪林:红邦创衣止于至善_品牌-生活时尚_品牌_YOKA时尚网

    金洪林:红邦创衣止于至善_品牌-生活时尚_品牌_YOKA时尚网 金洪林:红邦创衣止于至善

  9. D - Constructing Roads - 2421

    题意:有一些村庄需要修一些道路是所有村庄都可以连接,不过有些道路已经修好了,问题最少还需要修建的道路长度是多少. 输入的第一行是一个N代表N个村庄,下面是一个N*N的矩阵,代表着q->j的距离, ...

  10. C++ —— 非常量引用不能指向临时对象

    目录 举例 分析 解决 1.举例 非常量引用 指向 临时对象 —— 即:将 临时对象 传递给 非常量引用类型. 如以下情况就会出现: 实现实数Rational类,实数可以使用+号相加,运算的结果要可以 ...