返回到:Canvas API:CanvasRenderingContext2D
本节课,我们学习CanvasRenderingContext2D.bezierCurveTo()方法。
CanvasRenderingContext2D.bezierCurveTo()
是 Canvas 2D API 绘制三次贝赛尔曲线路径的方法。该方法需要三个点。第一、第二个点是控制点,第三个点是结束点。起始点是当前路径的最后一个点,绘制贝赛尔曲线前,可以通过调用 moveTo()
进行修改。
语法
void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
参数
cp1x
第一个控制点的 x 轴坐标。
cp1y
第一个控制点的 y 轴坐标。
cp2x
第二个控制点的 x 轴坐标。
cp2y
第二个控制点的 y 轴坐标。
x
结束点的 x 轴坐标。
y
结束点的 y 轴坐标。
示例
使用 bezierCurveTo
方法
这是一段绘制贝赛尔曲线的简单的代码片段。控制点是红色的,开始和结束点是蓝色的。
HTML
<canvas id="canvas"></canvas>
Copy to Clipboard
JavaScript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50,20);
ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
ctx.stroke();
ctx.fillStyle = 'blue';
// start point
ctx.fillRect(50, 20, 10, 10);
// end point
ctx.fillRect(50, 100, 10, 10);
ctx.fillStyle = 'red';
// control point one
ctx.fillRect(230, 30, 10, 10);
// control point two
ctx.fillRect(150, 70, 10, 10);
看下DEMO:
HTML
x
72
72
1
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<meta name="robots" content="noindex, nofollow">
6
<style>
7
body {
8
padding: 0;
9
margin: 0;
10
}
11
12
svg:not(:root) {
13
display: block;
14
}
15
16
.playable-code {
17
background-color: #f4f7f8;
18
border: none;
19
border-left: 6px solid #558abb;
20
border-width: medium medium medium 6px;
21
color: #4d4e53;
22
height: 100px;
23
width: 90%;
24
padding: 10px 10px 0;
25
}
26
27
.playable-canvas {
28
border: 1px solid #4d4e53;
29
border-radius: 2px;
30
}
31
32
.playable-buttons {
33
text-align: right;
34
width: 90%;
35
padding: 5px 10px 5px 26px;
36
}
37
</style>
38
39
<title>CanvasRenderingContext2D.bezierCurveTo() - 使用_beziercurveto_方法 | Web176教程www.web176.com</title>
40
41
</head>
42
<body>
43
44
<canvas id="canvas"></canvas>
45
46
47
48
<script>
49
var canvas = document.getElementById("canvas");
50
var ctx = canvas.getContext("2d");
51
52
ctx.beginPath();
53
ctx.moveTo(50,20);
54
ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
55
ctx.stroke();
56
57
ctx.fillStyle = 'blue';
58
// start point
59
ctx.fillRect(50, 20, 10, 10);
60
// end point
61
ctx.fillRect(50, 100, 10, 10);
62
63
ctx.fillStyle = 'red';
64
// control point one
65
ctx.fillRect(230, 30, 10, 10);
66
// control point two
67
ctx.fillRect(150, 70, 10, 10);
68
69
</script>
70
71
</body>
72
</html>
尝试 bezierCurveTo
参数
修改下面的代码并在线查看 canvas 的变化:
HTML
xxxxxxxxxx
1
84
84
1
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>CanvasRenderingContext2D.bezierCurveTo() - 尝试_beziercurveto_参数 | Web176教程www.web176.com</title>
6
<meta name="robots" content="noindex, nofollow">
7
<style>
8
body {
9
padding: 0;
10
margin: 0;
11
}
12
13
svg:not(:root) {
14
display: block;
15
}
16
17
.playable-code {
18
background-color: #f4f7f8;
19
border: none;
20
border-left: 6px solid #558abb;
21
border-width: medium medium medium 6px;
22
color: #4d4e53;
23
height: 100px;
24
width: 90%;
25
padding: 10px 10px 0;
26
}
27
28
.playable-canvas {
29
border: 1px solid #4d4e53;
30
border-radius: 2px;
31
}
32
33
.playable-buttons {
34
text-align: right;
35
width: 90%;
36
padding: 5px 10px 5px 26px;
37
}
38
</style>
39
40
41
</head>
42
<body>
43
44
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
45
<div class="playable-buttons">
46
<input id="edit" type="button" value="Edit" />
47
<input id="reset" type="button" value="Reset" />
48
</div>
49
<textarea id="code" class="playable-code">
50
ctx.beginPath();
51
ctx.bezierCurveTo(50, 100, 180, 10, 20, 10);
52
ctx.stroke();</textarea>
53
54
55
56
<script>
57
var canvas = document.getElementById("canvas");
58
var ctx = canvas.getContext("2d");
59
var textarea = document.getElementById("code");
60
var reset = document.getElementById("reset");
61
var edit = document.getElementById("edit");
62
var code = textarea.value;
63
64
function drawCanvas() {
65
ctx.clearRect(0, 0, canvas.width, canvas.height);
66
eval(textarea.value);
67
}
68
69
reset.addEventListener("click", function() {
70
textarea.value = code;
71
drawCanvas();
72
});
73
74
edit.addEventListener("click", function() {
75
textarea.focus();
76
})
77
78
textarea.addEventListener("input", drawCanvas);
79
window.addEventListener("load", drawCanvas);
80
81
</script>
82
83
</body>
84
</html>
返回到:Canvas API:CanvasRenderingContext2D
阅读剩余 88%
作者:terry,如若转载,请注明出处:https://www.web176.com/canvas_api/8020.html