|
<!
DOCTYPE
html>
<html lang
=
"kr"
>
<head>
<meta charset
=
"utf-8"
>
<title>
키보드와 하루
</title>
</head>
<body>
<canvas id
=
"tcanvas"
width
=
"300"
height
=
"200"
style
='
border
:
1px solid #000
';
>
</canvas>
<script>
var
canvas
= document.
getElementById
(
"tcanvas"
);
var
context
= canvas.
getContext
(
"2d"
);
context.
beginPath
();
//빈경로 새롭게 시작
context.
moveTo
(10,10);
//(10,10)을 시작점으로 설정
context.
lineTo
(50,50);
//(10,10) → (50,50) 직선을 경로에 추가
context.
lineTo
(150,10);
//(50,50) → (150,10) 직선을 경로에 추가
context.
stroke
();
//context의 경로에 있는 도형들을 모두 그림
context.
beginPath
();
//빈경로 새롭게 시작
context.
moveTo
(200,200);
//(200,200)을 시작점으로 설정
context.
lineTo
(110,110);
//(200,200) → (110,110) 직선을 경로에 추가
context.
stroke
();
//context의 경로에 있는 도형들을 모두 그림
context.
beginPath
();
//빈경로 새롭게 시작
context.
fillStyle
=
"yellow"
;
//내부 색깔을 노란색으로 지정
context.
moveTo
(100,120);
//(100,120)을 시작점으로 설정
context.
lineTo
(50,80);
//(100,120) → (50,80) 직선을 경로에 추가
context.
lineTo
(10,130);
//(50,80) → (10,130) 직선을 경로에 추가
context.
closePath
();
//경로를 닫아줌
context.
fill
();
//도형 내부의 색깔을 칠해주기
context.
stroke
();
//context의 경로에 있는 도형들을 모두 그림
</script>
</body>
</html>
|
