- HTMLCanvasElement.getContext() ๋ฉ์๋๋ ์บ๋ฒ์ค์ ๋๋ก์ ์ปจํ ์คํธ๋ฅผ ๋ฐํ
var ctx = canvas.getContext(contextType);
var ctx = canvas.getContext(contextType, contextAttributes);
-
๐ contextType ์บ๋ฒ์ค์ ์ฐ๊ด๋ ๋๋ก์ ์ปจํ ์คํธ๋ฅผ ์ ์ํ๋ ์ปจํ ์คํธ ์๋ณ์๋ฅผ ๊ฐ๋ DOMString์ ๋๋ค. ๊ฐ๋ฅํ ๊ฐ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
-
"2d", 2์ฐจ์ ๋ ๋๋ง ์ปจํ ์คํธ๋ฅผ ๋ํ๋ด๋ CanvasRenderingContext2D (en-US) ๊ฐ์ฒด๋ฅผ ์์ฑํ๊ฒ ํฉ๋๋ค.
-
-
๐ contextAttributes ๋ ๋๋ง ์ปจํ ์คํธ๋ฅผ ์์ฑํ ๋ ๋ช ๊ฐ์ง ์ปจํ ์คํธ ์์ฑ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
fillRect(x, y, width, height)
์์น ๋ ์ง์ฌ๊ฐํ์ ๊ทธ๋ฆฝ๋๋ค.
strokeRect(x, y, width, height)
์ง์ฌ๊ฐํ ์ค๊ณฝ์ ์ ๊ทธ๋ฆฝ๋๋ค.
clearRect(x, y, width, height)
ํน์ ๋ถ๋ถ์ ์ง์ฐ๋ ์ง์ฌ๊ฐํ์ด๋ฉฐ, ์ด ์ง์์ง ๋ถ๋ถ์ ์์ ํ ํฌ๋ช
ํด์ง๋๋ค.
- ๐ ์ง์ฌ๊ฐํ ๋ํ ์์
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
}
}
- ๐ ๋ํ์ ์์ ์ ์ฉํ๊ณ ์ ํ๋ฉด, fillStyle๊ณผ strokeStyle ๋ ๊ฐ์ง ์ค์ํ ์์ฑ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
fillStyle = color
๋ํ์ ์ฑ์ฐ๋ ์์ ์ค์ ํฉ๋๋ค.
strokeStyle = color
๋ํ์ ์ค๊ณฝ์ ์์ ์ค์ ํฉ๋๋ค.
- ๐ ์บ๋ฒ์ค ๋ ๋๋ง ์ปจํ ์คํธ(canvas rendering context)๋ ํ ์คํธ๋ฅผ ๋ ๋๋งํ๋ ๋ ๊ฐ์ง ๋ฐฉ๋ฒ์ ์ ๊ณต
fillText(text, x, y [, maxWidth])
์ฃผ์ด์ง (x, y) ์์น์ ์ฃผ์ด์ง ํ
์คํธ๋ฅผ ์ฑ์๋๋ค. ์ต๋ ํญ(width)์ ์ต์
๊ฐ ์
๋๋ค.
strokeText(text, x, y [, maxWidth])
์ฃผ์ด์ง (x, y) ์์น์ ์ฃผ์ด์ง ํ
์คํธ๋ฅผ ์น (stroke)ํฉ๋๋ค. ์ต๋ ํญ(width)์ ์ต์
๊ฐ ์
๋๋ค.
- ๐ fillText ์์ : ํ
์คํธ๋ ํ์ฌ์ fillStyle์ ์ฌ์ฉํ์ฌ ์ฑ์์ง๋๋ค.
function draw() {
var ctx = document.getElementById("canvas").getContext("2d");
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
}
- ๐ strokeText ์์ : ํ
์คํธ๋ ํ์ฌ์ strokeStyle์ ์ด์ฉํ์ฌ ์ฑ์์ง๋๋ค.
function draw() {
var ctx = document.getElementById("canvas").getContext("2d");
ctx.font = "48px serif";
ctx.strokeText("Hello world", 10, 50);
}