HTML5的画布:Paths

HTML5的画布路径是一系列的点与点之间的绘图指令。例如,一系列的点用线在它们之间,或者与它们之间的电弧。

路径用来绘制多种类型的形状(线,圆,多边形等)的HTML5画布上的,所以要理解这个核心概念是很重要的。

开始和关闭路径

路径开始和结束时使用的2D上下文函数调用beginPath()closePath() ,就像这样:

var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");

context.beginPath();

//... path drawing operations

context.closePath();

moveTo()

当使用一个路径图,使用的是虚拟的“笔”或“指针”。这个虚拟指针总是位于在一些点。移动虚拟指针是通过使用2D上下文功能 MOVETO(X,Y) ,就像这样:

context.moveTo(10,10);

lineTo()

context.beginPath();

context.moveTo(10,10);
context.lineTo(50,50);

context.closePath();

stroke() + fill()

context.beginPath();
context.moveTo(10,10);
context.lineTo(60,50);
context.lineTo(110,50);
context.lineTo(10,10);
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(100,10);
context.lineTo(150,50);
context.lineTo(200,50);
context.lineTo(100,10);
context.fill();
context.closePath();

Line Width

context.lineWidth = 10;
这里绘制的1,5和10的线宽三行:


Line Cape

  • butt
  • round
  • square
 

它可以是一个有点难以看到绘制一个线之间的差值的linecap 的价值对接广场。因此,我创建了使用线对的几个例子对接广场,拉近彼此,所以你可以看到其中的差别。顶部或左侧线正在使用的对接,和底部或行权使用

正如你可以看到,使用该行的linecap价值广场有一个额外的矩形在最后得出,这使该行时间稍长。

行加入

lineJoin的2D背景的属性定义了点如何绘制两条直线连接。当两个线连接的点被称为“线路连接”。该lineJoin属性可以具有以下值:

  • miter
  • bevel 
  • round 

这里有三个代码示例设置线条连接:

context.lineJoin =“miter”; 
context.lineJoin =“bevel”; 
context.lineJoin =“round ”;


这里有三个例子显示lineJoin的取值miterbevel round 


arc()

The 2D Context function arc() draws an arc on the canvas.

arc()函数有6个参数:

  • X:圆弧的中心点的x坐标。
  • Y:y坐标圆弧的中心点。
  • radius:圆弧的半径。
  • startAngle:弧度从该圆弧开始角。
  • endAngle:在电弧结束于该弧度角。
  • anticlockwise:设置化弧线的方向  false顺时针 true为逆时针

下面是一个代码示例:

context.lineWidth = 3; 

VAR X = 50; 
VAR Y = 50; 
VAR radius= 25; 
VAR startAngle =(Math.PI / 180)* 45; 
VAR endAngle =(Math.PI / 180)* 90; 
VAR anticlockwise = false; 

context.beginPath(); 
context.arc(X,Y,radius,startAngle,endAngle,anticlockwise); 
context.stroke(); 
context.closePath();

此代码示例绘制一个圆弧的中心点,在50,50,25像素,从45度开始,并一直持续到180度的半径。打算从0到360度转换为弧度,你可能已经注意到了。

下面是代码例子看起来在画布上绘制时:


下面是相同的代码示例,但与逆时针设置为


画出一个完整的圆,简单的设定由startAngle0和 endAngle至 2 * Math.PI其等于(Math.PI / 180)* 360。 

包含arcTo()

二维上下文有一个包含arcTo()函数,但它的能力可以使用模仿了lineTo()弧() ,所以我会跳过它。

到quadraticCurveTo()

到quadraticCurveTo()函数绘制二次贝塞尔曲线从一点到另一点。该曲线是由一个单一的控制点来控制。下面是一个代码示例:

context.lineWidth = 3; 

VAR fromX = 50; 
VAR fromY = 50; 
VAR TOX = 100; 
VAR TOY = 50; 
VAR CPX = 75; 
VAR CPY = 100; 

context.beginPath(); 
context.moveTo(fromX,fromY) ; 
context.quadraticCurveTo(CPX,CPY,TOX,TOY); 
context.stroke(); 
context.closePath();

使用控制点75,100(CPX,CPY)此代码示例绘制一条曲线,从50,50至100,50。由此产生的曲线是这样的:


在画布上的小圆点是我得出了有控制点。它不是曲线的一部分正常。

bezierCurveTo()

bezierCurveTo()函数绘制三次Bezier曲线从一个点另一个。三次贝塞尔曲线有2个控制点,而二次贝塞尔曲线只有1控制点。下面是一个代码示例:

context.lineWidth = 3; 

VAR fromX = 50; 
VAR fromY = 50; 
VAR TOX = 300; 
VAR TOY = 50; 
VAR cp1X = 100; 
VAR cp1Y = 100; 
VAR cp2X = 250; 
VAR cp2Y = 100; 

context.beginPath( ); 
context.moveTo(fromX,fromY); 
context.bezierCurveTo(cp1X,cp1Y,cp2X,cp2Y,TOX,TOY); 
context.stroke(); 
context.closePath();

使用控制点此代码示例绘制一条曲线,从50,50至300,50 100,100(cp1X,cp1Y)和250,100(cp2X,cp2Y)。由此产生的曲线是这样的:

 

在画布上的两个小点是,我已经吸引到你展示他们在哪里的控制点。它们不绘制为曲线的一部分。

下面是使用不同的开始点,结束点和控制点不同的例子:

context.lineWidth = 3; 

VAR fromX = 50; 
VAR fromY = 50; 
VAR TOX = 300; 
VAR TOY = 50; 
VAR cp1X = 100; 
VAR cp1Y = 10; 
VAR cp2X = 250; 
VAR cp2Y = 100; 

context.beginPath( ); 
context.moveTo(fromX,fromY); 
context.bezierCurveTo(cp1X,cp1Y,cp2X,cp2Y,TOX,TOY); 
context.stroke(); 
context.closePath();

这里是相应的曲线:


此外,两个小点是,我已经明确地呈现的控制点。


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huangyibin628/article/details/47316697
所属专栏: HTML5自由者
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭