canvas 태그는 html5에서 플러그인의 도움 없이 자바스크립트 코드로 그래픽을 수행 할 수 있도록 해 줌
이 캔버스를 이용하면 여러가지 것을 자유롭게 그릴 수 있고 이미지 합성 및 변환도 쉽게 가능
티스토리 뷰
1. 개념
canvas - 웹 페이지에서 그래픽을 표현
2. 태그
canvas
html5 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!
DOCTYPE
html>
<html lang
=
"kr"
>
<head>
<meta charset
=
"utf-8"
>
<title>
키보드와 하루
</title>
</head>
<body>
1
<canvas id
=
"tcanvas"
width
=
"300"
height
=
"200"
style
='
background-color
:
blue
'
>
</canvas>
2
<script>
var
canvas
= document.
getElementById
(
"tcanvas"
);
var
context
= canvas.
getContext
(
"2d"
);
context.
beginPath
();
context.
strokeStyle
=
"black"
;
context.
rect
(10,10,200,150);
context.
stroke
();
</script>
</body>
</html>
|
결과 화면
코드 설명
1
<canvas id
=
.......
></canvas>
지금 보시면 배경이 파란색인 canvas가 그려진 것을 보실 수 있습니다.
그리고 그 canvas라는 그래픽 안에 사각형을 그려보았습니다.
그리고 그 canvas라는 그래픽 안에 사각형을 그려보았습니다.
2
<script>
.......
</script>
여기서는 자바스크립트를 활용해서 선 색이 검은색인 네모를 넣어보았습니다.
이 캔버스라는 요소가 그래픽을 그릴 수 있다는 것을 표현하기 위해서 네모를 담아놓았고 앞으로 포스팅을 통해서 좀 더 자세히 기능이나 속성들을 올리도록 하겠습니다.
이 캔버스라는 요소가 그래픽을 그릴 수 있다는 것을 표현하기 위해서 네모를 담아놓았고 앞으로 포스팅을 통해서 좀 더 자세히 기능이나 속성들을 올리도록 하겠습니다.
'[개발]프로그래밍 > html5' 카테고리의 다른 글
| [html5] arc - canvas에서 원 그리기 (0) | 2021.02.26 |
|---|---|
| [html5] canvas - 선 ,도형 그리기 및 채우기 (0) | 2021.02.25 |
| [html5] video - 웹 페이지에서 비디오 재생 (0) | 2021.02.23 |
| [html5] iframe - 다른 html을 호출하기 위한 프레임 (0) | 2021.02.22 |
| [html5] multiple,datalist - 데이터 목록 나열 (0) | 2021.02.19 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday