HTML5 canvas中的路径方法

时间：2021-09-07 13:09:32

路径方法

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

开始点：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() 方法来定义开始点。
        HTML5 canvas中的路径方法

开始点：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。
        HTML5 canvas中的路径方法

中心：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中的路径方法

相关文章