刘作权博客
火华
html5学习:使用canvas画曲线
2014-08-14 23:57:47   阅读1767次

html5的canvas不仅可以画直线,也可以画曲线哦。画直线的方法是:


var canvas = document.getElementById('myCanvas2');
var context = canvas.getContext('2d');
context.beginPath();//直线开始
context.moveTo(100, 150);//直线的起点
context.lineTo(450, 50);//直线的终点
context.lineWidth = 15;//直线的宽度
context.strokeStyle='rgb(255,0,0)';//直线的颜色
context.lineCap='square';//直线端点:round、butt、square
context.stroke();//直线结束


1、曲线的弧度

html5曲线弧度的方法是arc(),其有6个参数:

context.arc(x, y, radius, startAngle, endAngle, antiClockwise);

分别表示为:弧度的圆心x、y,半径,开始角度,结束角度,是否逆时针,如下图

html5-canvas-arcs-diagram[2].png

所谓弧度就是一个圆周的一部分,可以用圆心(参数1、2)和圆的扇形半径(参数3)来表示。为了表示弧度的范围,必须定义弧度的起点(参数4)和终点(参数5),以及它的方向(参数6)。

  • 参数1:圆心x

  • 参数2:圆心y

  • 参数3:半径

  • 参数4:开始弧度

  • 参数5:结束弧度

  • 参数6:是否为逆时针方向,默认false

示例画一个简单的弧度:

<!DOCTYPE HTML>
<html>
<head>
<style>
#myCanvas{
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="300"></canvas>
<script>
function PI(deg)
{
return deg/180*Math.PI;
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var pi=Math.PI;
context.beginPath();
context.arc(200, 200, 100, PI(-90), PI(0), false);
context.lineWidth = 10;
context.strokeStyle = 'black';
context.stroke();
</script>
</body>
</html>

画了一个圆心为200,100,半径为100,弧度为90度的,起点为0度,终点为-90的顺时针圆弧。在这里必须要强调的是,画圆弧一定要对角度计算正确了,圆弧角度的方向也是顺时针的,并且水平右的角度为0。当然,如果因为PI的关系会弄混淆的话,可以使用示例的PI(deg)函数来把度数转换为PI的形式。

当然,弧度和直线一样,也可以使用ctrokeStyle/lineWidth/lineCap。


2、二次曲线

二次曲线也称圆锥曲线或圆锥截线,是直圆锥面的两腔被一平面所截而得的曲线。当截面不通过锥面的顶点时,曲线可能是圆、椭圆、双曲线、抛物线。当截面通过锥面的顶点时,曲线退缩成一点、一直线或二相交直线。在截面上的直角坐标系(x,y)之下,这些曲线的方程是x,y的二元二次方程。

使用arc()方法绘制出来的圆是个正圆,如果想画椭圆的画就必须使用二次曲线方法(quadraticCurveTo())。

context
.
quadraticCurveTo
(
controlX
,
 controlY
,
 endX
,
 endY
);
  • 参数1:控制点x

  • 参数2:控制到y

  • 参数3:结束点x

  • 参数4:结束点y

下面是示意图:

html5-canvas-quadratic-curves-diagram[1].png

一个控制点定义了二次曲线的曲率,通过创建两个虚构的切向线连接上下文点和结束点。上下文点定义函数moveTo()方法。移动控制点远离上下文点和结束点将创建尖锐的曲线,和移动控制点接近上下文点和结束点将创造更广泛的曲线。

值得说明的是,控制点是一个隐形的点,是不存在二次曲线上面的,它的存在是在无形的拉动整个曲线。曲线的起始点需要moveTo()函数指定,而参数的最后两个表示曲线的结束点,这一点比较怪,按理说所有的参数都应该放在同一个函数(比如:quadraticCurve())里才比较合理。

示例简单:

<!DOCTYPE HTML>
<html>
<head>
<style>
#myCanvas
{
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var pi=Math.PI;
context.beginPath();
context.moveTo(10, 290);
context.quadraticCurveTo(150, -200, 300, 290);
context.lineWidth = 10;
context.strokeStyle = 'black';
context.lineCap='round';
context.stroke();
</script>
</body>
</html>

当然,二次曲线和弧度一样,也可以使用ctrokeStyle/lineWidth/lineCap。

3、贝塞尔曲线

贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。当然在一些比较成熟的位图软件中也有贝塞尔曲线工具,如PhotoShop等。在Flash4中还没有完整的曲线工具,而在Flash5里面已经提供出贝塞尔曲线工具。

和二次曲线类似,它的函数是:bezierCurveTo()。贝塞尔曲线和二次曲线不同的是,它有2个控制点。二次曲线是有一个无形的控制点在拉动曲线,而贝塞尔曲线就是2个控制点在拉动曲线。如下图:

html5-canvas-bezier-curves-diagram3].png


它完整的函数是:

context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);

当然,它的起始点也需要上下文使用moveTo函数指定。

简单的示例:

<!DOCTYPE HTML>
<html>
<head>
<style>
#myCanvas
{
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var pi=Math.PI;
context.beginPath();
context.moveTo(10, 290);
context.bezierCurveTo(50,-200,150,200,500,290);
context.lineWidth = 10;
context.strokeStyle = '#444';
context.lineCap='round';
context.stroke();
</script>
</body>
</html>

当然,贝塞尔曲线和二次曲线一样,也可以使用ctrokeStyle/lineWidth/lineCap。



-----------------------------------------------------
转载请注明来源此处
原地址:#

-----网友评论----
1楼:太空守望者 发表于 2014-08-15 00:26:16
注意休息!
2楼:liuzuoquan 发表于 2014-08-15 00:27:24
好的~你也是啊!哈哈
-----发表评论----
微网聚博客乐园 ©2014 blog.mn886.net 鲁ICP备14012923号   网站导航