canvas
웹페이지 그래픽을 위한 컨테이너역할
그래픽위해 스크립트언어사용해야함
픽셀기반 / 스크립트를 통해서만 수정가능 /그래픽 주작업인 게임에 적합
<body>
<script>
//canvas안에 빨간 사각형나오게하기
let paper = document.getElementById('id');
//id속성을 사용해 작업할때 사용한다 만약 id가없다면 document.querySelector를 사용하면된다
let context = paper.getContext("2d");
//캔버스의 드로잉 컨텍스트를 반환한다 contextType을 2d로해주었다
context.fillStyle = "#FF00000"; //fillStyle은 색채워주는 함수이다 하지만 fillRect랑 같이써야 색이 칠해진다.
context.fillRect (1,1,150,75);
//fillRect는 색칠된 직사각형을 그린다 (x, y, width, height) x=세로 y=가로(border와떨어지 는거리) fillRect는 = 을 사용하면안된다
</script>
</body>
script 안에서 함수를 이어가겠다
//원호그리기
context.beginPath(); // 위의 사각형 다음으로 새로운경로를 시작한다
context.arc(50, 100, 10, 0, 2*Math.PI);
//(x,y,radius,startAngle,endAngle,counterclockwise) x-호 중심부의 수평좌표 y-호 중심부의 수직좌표 radius - 반지름 startAngle,endangle -호의 시작점과 끝 점 counterclockwise- 시작점끝점의반대방향 (기본값:false) 0PI와 2PI사이 시 작점끝점나타낸다
context.strokeStyle = "#000"
//기본색 검정색 테두리색을 지정하고 싶다면 하면된다 stroke에 그려질 선또는 도형의윤 곽선색상을 설정한다 투명도를 하기 위해서RGBA사용해야한다
context.fill = ();//원안을 채워줌 하지 만 사각형할때 fillstyle색지정되있어 빨간색나옴
context.stroke(); //위에 strokeStyle보이게 해줌
// 사선으로 그리기 2.2 150.75로
context.moveTo(2,2); //시작점
context.lineTo(150,75); //끝점 사선그리기
context.stroke();//그려준다
//텍스트그리기
context.font = "30px Arial"; //font크기와 font종류
context.fillStyle = "#FFF"; //font색 지정
context.fillText("CANVAS", 17, 50); /font적기 font의 위치지정 위의 fillRect가 150,75여서 그사이에 폰트를 지정하면된다
'HTML' 카테고리의 다른 글
| svg (0) | 2022.02.13 |
|---|---|
| Canvas (0) | 2022.02.13 |
| object (0) | 2022.02.12 |
| html5 video /audio (0) | 2022.02.12 |
| html5 form (0) | 2022.02.10 |