1.5 KiB
1.5 KiB
캔버스
<!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
let image = new Image();
image.src = 'myimage.png';
image.onload = function(){
g.drawImage(image, 100, 100);
}
캔버스
- save()
- restore()
- rotate()
- scale()
- translate()
- transform()