我们知道二次方贝塞尔曲线，那些曲线都是二维的，意思就是说，它们都只能向一个方向弯曲。如果需要如图这样，能够向两个方向弯曲的曲线，那么你需要的就是三次贝塞尔曲线。
该图所示应用程序使用bezierCurveTo()方法创建了一条代表三次方贝塞尔曲线的路径。该应用程序的代码列在了下面的程序清单中。
这段代码除了绘制曲线本身，还填充了表示曲线控制点与锚点的小圆圈。
html代码：
1 <html>
2 <head>
3 <title>Bezier Curves</title>
4
5 <style>
6 body {
7 background: #eeeeee;
8 }
9
10 #canvas {
11 background: #ffffff;
12 cursor: pointer;
13 margin-left: 10px;
14 margin-top: 10px;
15 -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
16 -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
17 box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
18 }
19 </style>
20 </head>
21
22 <body>
23 <canvas id=‘canvas‘ width=‘600‘ height=‘400‘>
24 Canvas not supported
25 </canvas>
26
27 <script src = ‘example.js‘></script>
28 </body>
29 </html>
example.js代码：
1 var canvas = document.getElementById(‘canvas‘),
2 context = canvas.getContext(‘2d‘),
3 endPoints = [
4 { x: 130, y: 70 },
5 { x: 430, y: 270 },
6 ],
7 controlPoints = [
8 { x: 130, y: 250 },
9 { x: 450, y: 70 },
10 ];
11
12 function drawGrid(color, stepx, stepy) {
13 context.save()
14
15 context.strokeStyle = color;
16 context.fillStyle = ‘#ffffff‘;
17 context.lineWidth = 0.5;
18 context.fillRect(0, 0, context.canvas.width, context.canvas.height);
19
20 for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
21 context.beginPath();
22 context.moveTo(i, 0);
23 context.lineTo(i, context.canvas.height);
24 context.stroke();
25 }
26
27 for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
28 context.beginPath();
29 context.moveTo(0, i);
30 context.lineTo(context.canvas.width, i);
31 context.stroke();
32 }
33
34 context.restore();
35 }
36
37 function drawBezierCurve() {
38 context.strokeStyle = ‘blue‘;
39 context.fillStyle = ‘yellow‘;
40
41 context.beginPath();
42 context.moveTo(endPoints[0].x, endPoints[0].y);
43 context.bezierCurveTo(controlPoints[0].x, controlPoints[0].y,
44 controlPoints[1].x, controlPoints[1].y,
45 endPoints[1].x, endPoints[1].y);
46 context.stroke();
47 }
48
49 function drawEndPoints() {
50 context.strokeStyle = ‘blue‘;
51 context.fillStyle = ‘red‘;
52
53 endPoints.forEach( function (point) {
54 context.beginPath();
55 context.arc(point.x, point.y, 5, 0, Math.PI*2, false);
56 context.stroke();
57 context.fill();
58 });
59 }
60
61 function drawControlPoints() {
62 context.strokeStyle = ‘yellow‘;
63 context.fillStyle = ‘blue‘;
64
65 controlPoints.forEach( function (point) {
66 context.beginPath();
67 context.arc(point.x, point.y, 5, 0, Math.PI*2, false);
68 context.stroke();
69 context.fill();
70 });
71 }
72
73 drawGrid(‘lightgray‘, 10, 10);
74
75 drawControlPoints();
76 drawEndPoints();
77 drawBezierCurve();
总结了bezierCurveTo()方法的用法。
bezierCurveTo(double cpx,double cpy,double cp2x,double cp2y,double x,double
y):创建一条代表三次方贝塞尔曲线的路径。你需要向该方法传入三个点的坐标，前两点是该曲线的控制点，最后一个店是锚点。
时间： 2024-10-01 07:45:00