2025-01-24T02:27:50

2025-01-24 02:27:50 +09:00
parent 342a843ce6
commit f43f6328c0
47 changed files with 292 additions and 145 deletions
--- a/doc/topics/Canvas.md
+++ b/doc/topics/Canvas.md
@@ -0,0 +1,84 @@
+# 캔버스
+
+```html
+<!doctype html>
+<html>
+<head>
+    <title>Test</title>
+    <script>
+        window.addEventListener("DOMContentLoaded", () => {
+            const canvas = document.querySelector('canvas');
+            const width = canvas.width = window.innerWidth;
+            const height = canvas.height = window.innerHeight;
+
+            const g = canvas.getContext("2d");
+            g.fillStyle = 'rgb(0, 0, 0)';
+            g.fillRect(10, 10, 100, 200);
+
+            g.strokeStyle = 'red';
+            g.lineWidth = 1;
+            g.strokeRect(20, 20, 200, 200);
+        });
+
+    </script>
+</head>
+
+<body style="margin:0; overflow: hidden;">
+    <canvas id="canvas" style="background-color: antiquewhite;">
+    </canvas>
+</body>
+
+</html>
+```
+
+- fillStyle
+- strokeStyle
+- lineWidth
+- lineCap
+- lineJoin
+- font
+- textAlign
+- textBaseline
+- shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY
+
+- fillRect(x, y, w, h)
+- strokeRect(x, y, w, h)
+- clearRect(x ,y, w, h)
+
+## Path
+
+- beginPath()
+- moveTo(x, y)
+- lineTo(x, y)
+- arc(x, y, radius, startAngle, endAngle, anticlockwise)
+- arcTo(x,y,x,y,radius)
+- bezierCurveTo(x,y,x,y,x,y)
+- quadraticCurveTo(x,y,x,y)
+- fill()
+- stroke()
+- closePath()
+
+## Text
+
+- strokeText(str, x, y)
+- fillText(str, x, y)
+- measureText(str)
+
+## Image
+
+```javascript
+let image = new Image();
+image.src = 'myimage.png';
+image.onload = function(){
+    g.drawImage(image, 100, 100);
+}
+```
+
+## 캔버스
+
+- save()
+- restore()
+- rotate()
+- scale()
+- translate()
+- transform()