-
Notifications
You must be signed in to change notification settings - Fork 0
/
ex-2-24.html
108 lines (96 loc) · 3.07 KB
/
ex-2-24.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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>다항곡선</title>
<link rel="stylesheet" href="css/basic.css">
</head>
<body>
<canvas id="canvas" width="600" height="600">
캔버스를 지원하지 않습니다.
</canvas>
<h1>다항곡선 그리기</h1>
<p>bezierCurveTo(제어점1x,제어점1y,제어점2x,제어점2y,기준점x,기준점y)</p>
<script src="js/common.js"></script>
<script>
var endPoints = [ {'x': 130, 'y': 70}, {'x': 430, 'y': 270} ],
controlPoints = [ {'x': 130, 'y': 250}, {'x': 450, 'y': 70} ];
function init () {
context.clearRect(0,0,canvas.width,canvas.height);
drawGrid('rgba(0,0,0,0.1)','#b06f14');
drawEndPoints();
drawControlPoints();
context.strokeStyle = 'blue';
context.beginPath();
context.moveTo(endPoints[0].x, endPoints[0].y);
drawCurveTo(controlPoints[0].x, controlPoints[0].y, controlPoints[1].x, controlPoints[1].y, endPoints[1].x, endPoints[1].y);
context.stroke();
}
function drawControlPoints(){
context.fillStyle = 'green';
context.beginPath();
drawArc(controlPoints[0].x, controlPoints[0].y, 5, 'fill');
drawArc(controlPoints[1].x, controlPoints[1].y, 5, 'fill');
}
function drawEndPoints(){
context.fillStyle = 'red';
context.beginPath();
drawArc(endPoints[0].x, endPoints[0].y, 5, 'fill');
drawArc(endPoints[1].x, endPoints[1].y, 5, 'fill');
}
init();
var drag = false,
mousedown = {},
currentMouse = {},
points={};
canvas.addEventListener('mousedown',function(e){
mousedown = window2canvas(e);
drag = true;
switch(true){
case ( mousedown.x > controlPoints[0].x - 5 && mousedown.x < controlPoints[0].x + 5 && mousedown.y > controlPoints[0].y - 5 && mousedown.y < controlPoints[0].y + 5 ):
points.cp0 = true;
break;
case ( mousedown.x > controlPoints[1].x - 5 && mousedown.x < controlPoints[1].x + 5 && mousedown.y > controlPoints[1].y - 5 && mousedown.y < controlPoints[1].y + 5 ):
points.cp1 = true;
break;
case ( mousedown.x > endPoints[0].x - 5 && mousedown.x < endPoints[0].x + 5 && mousedown.y > endPoints[0].y - 5 && mousedown.y < endPoints[0].y + 5 ):
points.ep0 = true;
break;
case ( mousedown.x > endPoints[1].x - 5 && mousedown.x < endPoints[1].x + 5 && mousedown.y > endPoints[1].y - 5 && mousedown.y < endPoints[1].y + 5 ):
points.ep1 = true;
break;
}
});
canvas.addEventListener('mousemove',function(e){
if ( drag ) {
currentMouse = window2canvas(e);
switch(true){
case points.cp0:
controlPoints[0].x = currentMouse.x;
controlPoints[0].y = currentMouse.y;
break;
case points.cp1:
controlPoints[1].x = currentMouse.x;
controlPoints[1].y = currentMouse.y;
break;
case points.ep0:
endPoints[0].x = currentMouse.x;
endPoints[0].y = currentMouse.y;
break;
case points.ep1:
endPoints[1].x = currentMouse.x;
endPoints[1].y = currentMouse.y;
break;
}
drawArc(currentMouse.x, currentMouse.y, 5, 'fill');
init();
}
});
canvas.addEventListener('mouseup',function(e){
drag = false;
points = {};
init();
});
</script>
</body>
</html>