-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbezier.html
63 lines (45 loc) · 1.29 KB
/
bezier.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="deCasteljau.js"></script>
</head>
<body>
<h1>Bezier Curve on canvas</h1>
<canvas width=500 height=500 id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var controlPoints = [];
var size = 4;//Math.round(20 * Math.random()) + 20;
for(var i = 0; i < size; i++){
controlPoints.push({x: 500 * Math.random(), y: 500 * Math.random()});
}
var bezier = deCasteljauBezier(controlPoints);
console.log(JSON.stringify(bezier));
context.strokeStyle = "red";
context.lineWidth = 1;
context.beginPath();
context.moveTo(controlPoints[0].x, controlPoints[0].y);
controlPoints.forEach(function (p) {
context.lineTo(p.x, p.y);//设置起点
});
context.stroke();
context.closePath();
context.beginPath();
context.strokeStyle = "blue";
var pt = 0;
var draw = setInterval(function () {
var p = bezier[pt];
context.lineTo(p.x, p.y);//设置起点
pt++;
context.stroke();
if (pt == bezier.length - 1) {
clearInterval(draw);
context.closePath();
}
}, 50);
</script>
</body>
</html>