Skip to content

Commit 38f3b30

Browse files
dusunaxdusunax
committed
feat: add canvas and drag-and-drop examples in new HTML files
1 parent 5c45a17 commit 38f3b30

File tree

2 files changed

+316
-0
lines changed

2 files changed

+316
-0
lines changed

‎web-api/canvas.html‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Canvas API</title>
7+
<style>
8+
canvas {
9+
width: 400px;
10+
height: 300px;
11+
border: 1px solid #000;
12+
background-color: #ffe;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<p>draw text</p>
18+
<canvas id="canvas1"></canvas>
19+
20+
<p>draw rect</p>
21+
<canvas id="canvas2"></canvas>
22+
23+
<p>draw line</p>
24+
<canvas id="canvas3"></canvas>
25+
26+
<p>draw arc</p>
27+
<canvas id="canvas4"></canvas>
28+
29+
<p>draw gradient</p>
30+
<canvas id="canvas5"></canvas>
31+
32+
<p>draw image</p>
33+
<canvas id="canvas6"></canvas>
34+
35+
<p>draw global composite operation</p>
36+
<canvas id="canvas8"></canvas>
37+
38+
<p>draw image2</p>
39+
<canvas id="canvas9"></canvas>
40+
41+
<p>draw mirror image</p>
42+
<canvas id="canvas11"></canvas>
43+
44+
<p>draw mirror image</p>
45+
<canvas id="canvas12"></canvas>
46+
47+
<script>
48+
const setCanvas = (canvasId) => {
49+
canvas = document.getElementById(canvasId);
50+
ctx = canvas.getContext('2d');
51+
canvas.width = 400;
52+
canvas.height = 300;
53+
canvas.style.border = '1px solid #000';
54+
canvas.style.backgroundColor = '#ffe';
55+
return ctx;
56+
}
57+
58+
const drawText = (ctx) => {
59+
ctx.font = '48px serif';
60+
ctx.textAlign = 'center';
61+
ctx.textBaseline = 'hanging'; // top, hanging, middle, alphabetic(기본), ideographic, bottom
62+
ctx.fillStyle = 'red';
63+
ctx.fillText("hello", canvas.width / 2, canvas.height / 2);
64+
65+
ctx.strokeStyle = 'blue';
66+
ctx.lineWidth = 2;
67+
ctx.strokeText("hello", canvas.width / 2, canvas.height / 2 + 50);
68+
69+
let text = ctx.measureText("hello");
70+
console.log(text.width);
71+
}
72+
drawText(setCanvas('canvas1'));
73+
74+
const drawRect = (ctx) => {
75+
ctx.strokeStyle = 'blue';
76+
ctx.strokeRect(10, 10, 100, 100);
77+
ctx.fillStyle = 'blue';
78+
ctx.fillRect(100, 100, 100, 100);
79+
ctx.clearRect(50, 50, 100, 100);
80+
}
81+
drawRect(setCanvas('canvas2'));
82+
83+
const drawLineTo = (ctx) => {
84+
ctx.beginPath();
85+
ctx.strokeStyle = 'red';
86+
ctx.fillStyle = 'skyblue';
87+
ctx.lineWidth = 10;
88+
// ctx.lineCap = 'round'; // butt, round, square
89+
ctx.lineJoin = 'round'; // miter, round, bevel
90+
ctx.setLineDash([10, 5]);
91+
ctx.moveTo(10, 10);
92+
ctx.lineTo(200, 200);
93+
ctx.lineTo(200, 10);
94+
ctx.closePath();
95+
ctx.stroke();
96+
ctx.fill();
97+
98+
ctx.beginPath();
99+
ctx.globalAlpha = 0.5;
100+
ctx.setLineDash([20, 25]);
101+
ctx.moveTo(300, 10);
102+
ctx.lineTo(350, 100);
103+
ctx.lineTo(300, 190);
104+
ctx.closePath();
105+
ctx.stroke();
106+
ctx.fill();
107+
}
108+
drawLineTo(setCanvas('canvas3'));
109+
110+
const drawArc = (ctx) => {
111+
ctx.beginPath();
112+
ctx.arc(100, 100, 75, 135 * Math.PI / 180, 315 * Math.PI / 180, true);
113+
ctx.closePath();
114+
ctx.stroke();
115+
116+
ctx.beginPath();
117+
ctx.arc(100, 100, 75, 150 * Math.PI / 180, 300 * Math.PI / 180, false);
118+
ctx.fill();
119+
120+
121+
ctx.beginPath();
122+
ctx.arc(300, 100, 75, 0, 90 * Math.PI / 180, true);
123+
ctx.closePath();
124+
ctx.stroke();
125+
}
126+
drawArc(setCanvas('canvas4'));
127+
128+
function drawLinearGradient() {
129+
let gradient = ctx.createLinearGradient(0, 0, 100, 100);
130+
gradient.addColorStop(0, 'red');
131+
gradient.addColorStop(0.5, 'blue');
132+
gradient.addColorStop(1, 'green');
133+
ctx.fillStyle = gradient;
134+
ctx.fillRect(0, 0, 100, 100);
135+
ctx.fillRect(100, 100, 100, 100);
136+
}
137+
drawLinearGradient(setCanvas('canvas5'));
138+
139+
function drawRadialGradient() {
140+
let gradient = ctx.createRadialGradient(190, 100, 0, 100, 100, 100);
141+
gradient.addColorStop(0.3, 'red');
142+
gradient.addColorStop(0.5, 'blue');
143+
gradient.addColorStop(1, 'green');
144+
ctx.fillStyle = gradient;
145+
ctx.arc(100, 100, 100, 0, 2 * Math.PI);
146+
ctx.fill();
147+
ctx.fillRect(150, 150, 100, 100);
148+
// ctx.fillRect(0, 0, 400, 300);
149+
}
150+
drawRadialGradient(setCanvas('canvas6'));
151+
152+
function drawShadow() {
153+
ctx.shadowColor = '#00000055';
154+
ctx.shadowBlur = 10;
155+
ctx.shadowOffsetX = 10;
156+
ctx.shadowOffsetY = 10;
157+
ctx.fillStyle = 'red';
158+
ctx.fillRect(150, 100, 100, 100);
159+
}
160+
drawShadow(setCanvas('canvas8'));
161+
162+
function drawGlobalCompositeOperation() {
163+
ctx.globalCompositeOperation = 'source-over';
164+
ctx.fillStyle = 'red';
165+
ctx.fillRect(100, 100, 100, 100);
166+
167+
ctx.globalCompositeOperation = 'source-atop';
168+
ctx.globalCompositeOperation = 'source-in';
169+
ctx.globalCompositeOperation = 'source-out';
170+
ctx.globalCompositeOperation = 'source-over';
171+
ctx.globalCompositeOperation = 'destination-atop';
172+
ctx.globalCompositeOperation = 'destination-in';
173+
ctx.globalCompositeOperation = 'destination-out';
174+
ctx.globalCompositeOperation = 'destination-over';
175+
ctx.globalCompositeOperation = 'lighter';
176+
ctx.globalCompositeOperation = 'copy';
177+
ctx.globalCompositeOperation = 'xor';
178+
179+
ctx.fillStyle = 'blue';
180+
ctx.fillRect(150, 150, 100, 100);
181+
}
182+
drawGlobalCompositeOperation(setCanvas('canvas9'));
183+
184+
function drawTransform() {
185+
ctx.fillStyle = 'red';
186+
ctx.fillRect(0, 0, 100, 100);
187+
ctx.translate(100, 100);
188+
189+
ctx.fillStyle = 'green';
190+
ctx.fillRect(0, 0, 100, 100);
191+
ctx.scale(0.5, 0.5);
192+
193+
ctx.fillStyle = 'blue';
194+
ctx.fillRect(0, 0, 100, 100);
195+
ctx.scale(1, 2);
196+
ctx.rotate(Math.PI / 180 * 90);
197+
198+
ctx.fillStyle = 'yellow';
199+
ctx.fillRect(0, 0, 100, 100);
200+
}
201+
drawTransform(setCanvas('canvas11'));
202+
203+
// function drawImage() {
204+
// let img = new Image();
205+
// img.src = 'https://cdn-icons-png.flaticon.com/128/249/249390.png';
206+
// img.onload = () => {
207+
// let pattern = ctx.createPattern(img, 'repeat');
208+
// ctx.fillStyle = pattern;
209+
// ctx.globalAlpha = 0.8;
210+
// ctx.arc(100, 100, 100, 0, 2 * Math.PI);
211+
// ctx.fill();
212+
// ctx.fillRect(150, 150, 100, 100);
213+
// }
214+
// }
215+
// drawImage(setCanvas('canvas7'));
216+
217+
// function drawImage2() {
218+
// let img = new Image();
219+
// img.src = 'https://cdn-icons-png.flaticon.com/128/249/249390.png';
220+
// img.onload = () => {
221+
// ctx.drawImage(img, 50, 100); // 이미지 크기 그대로 출력
222+
// ctx.drawImage(img, 200, 50, 50, 50); // 이미지 크기 조정
223+
// ctx.drawImage(img, 70, 0, 50, 50, 200, 100, 100, 100); //
224+
// }
225+
// }
226+
// drawImage2(setCanvas('canvas10'));
227+
228+
function drawMirrorImage() {
229+
let img = new Image();
230+
img.src = 'https://cdn-icons-png.flaticon.com/128/249/249390.png';
231+
img.onload = () => {
232+
ctx.drawImage(img, 65, 100);
233+
ctx.translate(canvas.width, 0);
234+
ctx.scale(-1, 1);
235+
ctx.drawImage(img, 65, 100);
236+
}
237+
}
238+
drawMirrorImage(setCanvas('canvas12'));
239+
</script>
240+
</body>
241+
</html>

‎web-api/drag.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>드래그</title>
7+
<style>
8+
main {
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
gap: 10px;
13+
}
14+
.box {
15+
width: 300px;
16+
height: 300px;
17+
border: 1px solid black;
18+
background-color: skyblue;
19+
}
20+
img {
21+
width: 100%;
22+
height: 100%;
23+
}
24+
p {
25+
text-align: center;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<p>drag to move image & drag file into box</p>
31+
<main>
32+
<div class="box" ondragover="dragOver(event)" ondrop="drop(event)">
33+
<img src="https://picsum.photos/300/300" alt="img" draggable="true" ondragstart="dragStart(event)" id="img1">
34+
</div>
35+
<div class="box" ondragover="dragOver(event)" ondrop="drop(event)">
36+
</div>
37+
<div class="box" ondragover="dragOver(event)" ondrop="drop(event)">
38+
</div>
39+
</main>
40+
<script>
41+
function dragStart(e) {
42+
e.dataTransfer.setData('text/plain', e.target.id);
43+
}
44+
function dragOver(e) {
45+
e.preventDefault();
46+
}
47+
function drop(e) {
48+
e.preventDefault();
49+
let data = e.dataTransfer.getData('text/plain');
50+
let targetBox = e.target.closest('.box');
51+
console.log(e.dataTransfer);
52+
53+
if (data) {
54+
targetBox.innerHTML = '';
55+
targetBox.appendChild(document.getElementById(data));
56+
} else if (e.dataTransfer.files.length > 0) {
57+
console.log(e.dataTransfer.files);
58+
let file = e.dataTransfer.files[0];
59+
if (file.type.startsWith('image/')) {
60+
let reader = new FileReader();
61+
reader.onload = function(event) {
62+
let img = document.createElement('img');
63+
img.src = event.target.result;
64+
img.draggable = true;
65+
img.ondragstart = dragStart;
66+
targetBox.innerHTML = '';
67+
targetBox.appendChild(img);
68+
};
69+
reader.readAsDataURL(file);
70+
}
71+
}
72+
}
73+
</script>
74+
</body>
75+
</html>

0 commit comments

Comments
 (0)