startAngle:圆弧开始的角弧度。

MDN Applying styles and colors

仔细看,在曲线下方有一个小点,那是这条曲线的控制点。

y:圆弧的中心点的Y坐标位置。

下面是上面代码的返回结果:

你的浏览器不支持HTML5 Canvas!

你的浏览器不支持HTML5 Canvas!

这个例子将“虚拟笔”移动到这个坐标点上。

下面是一个不同的例子,它的开始点和结束点于上面的例子相同,但是控制点和上面的例子不相同。

context.lineJoin="miter";context.lineJoin="bevel";context.lineJoin="round";

bevel的连接点是一个平头的连接点。

线条的线条

varcanvas=document.getElementById;varcontext=canvas.getContext;context.beginPath();//...绘制路径context.closePath函数当你在canvas中绘制一条路径的时候,你可以想象自己正在使用一支“虚拟笔”。这支虚拟笔总是位于某个位置,你可以使用2D上下文的moveTo函数来移动这支虚拟笔。例如下面的代码:context.moveTo;

你的浏览器不支持HTML5 Canvas!

下面是这三种取值的示例代码:

context.lineWidth=3;varfromX=50;varfromY=50;vartoX=300;vartoY=50;varcp1X=100;varcp1Y=10;varcp2X=250;varcp2Y=100;context.beginPath();context.moveTo;context.bezierCurveTo(cp1X,cp1Y,cp2X,cp2Y,toX,toY);context.stroke;

stroke函数

上面的代码得到的结果如下:

lineTo()函数还会将虚拟笔移动到执行的结束点位置。上面的例子中是移动到的位置。

在你没有通知2D上下文绘制路径之前,实际是不会在画布上绘制任何东西的。你可以通过stroke函数来通知2D上下文。

bezierCurveTo()函数

文章的最后,我们引用MDN上的一个例子,它用Canvas路径绘制出“吃豆人”游戏的一个小场景:

在使用路径来绘制线条的时候,你可以设置线条的线头样式。线头的样式通过2D上下文的lineCap属性来设置。它有三个可选值:

下面的例子展示了stroke函数的用法。

线条的连接

你的浏览器不支持HTML5 Canvas!

下面是几个不同线头样式的线条的例子。所有的线条的宽度都是10。最总版的一组线条的lineCap的取值为butt,中间的一组线条的lineCap的取值为round,最右边的一组线条的lineCap的取值为square

lineCap的取值buttsquare非常相似。有时难以区别。这里制作了几个小例子,从这些例子中你可以看出它们之间的微小差别。下面又三组线条,每一组左边的线条的lineCap属性取值为butt,右边的线条的lineCap属性取值为square

关于控制点,可以参考下面的图像:

context.lineWidth=3;varx=50;vary=50;varradius=25;varstartAngle=*45;varendAngle=*180;varanticlockwise=false;context.beginPath();context.arc(x,y,radius,startAngle,endAngle,anticlockwise);context.stroke;
context.lineWidth=3;varfromX=50;varfromY=50;vartoX=300;vartoY=50;varcp1X=100;varcp1Y=100;varcp2X=250;varcp2Y=100;context.beginPath();context.moveTo;context.bezierCurveTo(cp1X,cp1Y,cp2X,cp2Y,toX,toY);context.stroke;

miter的连接点是一个三角形的连接点。

当你绘制的线条宽度大于1的时候,扩展的线条宽度将平均分配在线条中心线的两侧。距离来说,如果你从这个点绘制一条直线到这个点,线条的宽度为10,那么,实际上是从这个点开始绘制,然后扩展到这个点,在水平绘制到这两个点,就像是绘制一个矩形。

fill()函数用于填充有路径操作指定的图形。

lineTo()函数

butt样式的线头是扁平且和线正交的样式。

返回HTML5 Canvas教程目录 相关阅读

线条的宽度

round样式的线头是一个圆角的线头,圆的半径等于线条宽度的一半。

开始和关闭一条路径

lineTo函数用于从虚拟笔的当前位置绘制一条直线到lineTo()函数中指定的点。下面是一个例子:

context.beginPath();context.moveTo;context.lineTo;context.lineTo;context.lineTo;context.stroke;context.beginPath();context.moveTo;context.lineTo;context.lineTo;context.lineTo;context.fill;

radius:圆弧的半径。

上面代码的返回结果如下:

2D上下文的arc()函数可以用于绘制一条曲线。arc()函数有6个参数:

这段代码从绘制一条三次贝兹曲线到,两个控制点分别为:。得到的结果如下:

如果你要花一个完整的圆,可以简单的设置startAngle为0,endAngle设置为2 * Math.PI,它相当于* 360

上面的例子设置绘制线条的宽度为10像素。

绘制曲线

要开始和关闭一条路径可以使用2D上下文的beginPath()closePath()函数。例如下面的例子:

上面的代码绘制一条从的二次贝兹曲线,这条曲线的控制点为。得到的结果如下所示:

这个例子中首先移动虚拟笔到坐标点位置,然后从这个点绘制一条直线到坐标点。

functiondraw(){varcanvas=document.getElementById;if{varctx=canvas.getContext;roundedRect;roundedRect;roundedRect;roundedRect;roundedRect;roundedRect;ctx.beginPath();ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);ctx.lineTo;for{ctx.fillRect;}for{ctx.fillRect;}for{ctx.fillRect;}ctx.beginPath;ctx.lineTo;ctx.bezierCurveTo;ctx.bezierCurveTo(105,88,111,94,111,102);ctx.lineTo;ctx.lineTo;ctx.lineTo;ctx.lineTo;ctx.lineTo;ctx.lineTo;ctx.lineTo;ctx.fillStyle="white";ctx.beginPath;ctx.bezierCurveTo;ctx.bezierCurveTo;ctx.bezierCurveTo;ctx.bezierCurveTo;ctx.moveTo;ctx.bezierCurveTo;ctx.bezierCurveTo(99,103,100,106,103,106);ctx.bezierCurveTo(106,106,107,103,107,101);ctx.bezierCurveTo;ctx.fill();ctx.fillStyle="black";ctx.beginPath();ctx.arc(101,102,2,0,Math.PI*2,true);ctx.fill;ctx.arc(89,102,2,0,Math.PI*2,true);ctx.fill();}}//Autilityfunctiontodrawarectanglewithroundedcorners.functionroundedRect(ctx,x,y,width,height,radius){ctx.beginPath();ctx.moveTo;ctx.lineTo;ctx.quadraticCurveTo(x,y+height,x+radius,y+height);ctx.lineTo(x+width-radius,y+height);ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);ctx.lineTo;ctx.quadraticCurveTo(x+width,y,x+width-radius,y);ctx.lineTo;ctx.quadraticCurveTo;ctx.stroke();}
context.lineWidth=3;varfromX=50;varfromY=50;vartoX=100;vartoY=50;varcpX=75;varcpY=100;context.beginPath();context.moveTo;context.quadraticCurveTo;context.stroke;

下面分别是三种线条连接点的例子,从左到右的lineJoin属性分别是:miterbevelround

你可以使用2D上下文的lineWidth属性来设置绘制线条的宽度。下面是一个例子:

square样式的线头会在线的末端绘制一个矩形。矩形的大小为:线条的宽度 X
线条的宽/2。

stroke()函数用于路径操作指定的图形的外轮廓。

context.lineWidth=10;

2D上下文的lineJoin属性用于定义两条线条连接处的点如何绘制。两条线条连接处的点被称为“连接点”。lineJoin属性有下面的三种取值:

你的浏览器不支持HTML5 Canvas!

你的浏览器不支持HTML5 Canvas!

arcTo()函数

bezierCurveTo()函数用于从一个点到另一个点绘制一条三次贝兹曲线。三次贝兹曲线有两个控制点,而二次贝兹曲线只有一个控制点。它的语法为:bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)。下面是一个例子:

正如上面的结果所示,square线头的线条要比butt线头的线条要长。

上面的代码绘制了一条弧线,它的中心点位于坐标点,半径为25,从45度开始到180度结束。

你的浏览器不支持HTML5 Canvas!

endAngle:圆弧结束的角弧度。

context.beginPath();context.moveTo;context.lineTo;context.closePath();

你的浏览器不支持HTML5 Canvas!

x:圆弧的中心点的X坐标位置。

2D上下文中有一个arcTo()函数,它用于从当前的点绘制一条曲线到参数指定的点,曲线的半径也由参数指定。它的语法为:arcTo(x1, y1, x2, y2, radius)。注意:参数中x1, y1, x2, y2指的是这个点的控制点。arcTo()函数可以使用lineTo()arc函数来模仿。

quadraticCurveTo()函数

下面的例子绘制3条直线,它们的宽度分别为1,5和10。

曲线下方的两个小圆点是两个控制点,他们并不是曲线的一部分。

你的浏览器不支持HTML5 Canvas!

round的连接点是一个圆角的连接点。

你的浏览器不支持HTML5 Canvas!

anticlockwise:设置是以顺时针还是逆时针绘制圆弧,false为顺时针。

MDN Drawing shapes with canvas

上面的例子如果将anticlockwise设置为true,会得到下面的结果:

一条HTML5
canvas路径是通过绘制指令来连接一系列的点,由这一系列的点构成直线或曲线。路径可以用于在HTML5
canvas上绘制各种类型的图形:直线、圆形、多边形等等。路径的绘制是canvas的核心,必须很好的理解和掌握。

你的浏览器不支持HTML5 Canvas!

quadraticCurveTo()函数用于绘制一条二次贝兹曲线。这条曲线由一个控制点来控制,它的语法为:quadraticCurveTo。下面是一个示例代码:

相关文章

网站地图xml地图