84 lines
1.5 KiB
Markdown
84 lines
1.5 KiB
Markdown
# 캔버스
|
|
|
|
```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() |