section element : 문서나 어플리케이션의 섹션을 나타낸다. 과거 div, span, id, class만으로 전체 문서 구조를 만들던 것에 비해서 보다 명시적으로 구조를 제작할 수 있다.
nav element : 네비게이션을 위해 구성된 섹션, 책갈피 기능
article element : 문서 내의 독립적인 글, 블로그의 글, 뉴스 사이트의 뉴스
aside element : 주 내용과 관련이 적은 내용
time element : 기계가 인식할 수 있는 시간을 이용하여 날짜나 시간을 나타낸다.
b element : 문서상에서 중요한 의미는 없지만 문체적으로 다르게 나타내어져야 하는 텍스트를 위해서 사용된다. 상품 설명안의 상품의 이름, 문서의 특정 키워드
input element : HTML5 Demo
meter : 분량이나 수량을 나타낼 때 사용된다.
datalist : 미리 정의된 option 묶음을 나타낸다.
details, summary element: 사용자가 확인할 수 있는 추가 정보를 나타낸다.
video, audio element : 멀티미디어 요소를 웹페이지에 넣는 기능. API 제공
canvas element : 비트맵 이미지 콘텐츠를 제공하기 위한 요소. 제공되는 컨텐츠의 자유로운 재가공이 가능한 API 제공. 컨텐츠에 적합한 다른 요소가 있을 경우에는 canvas 요소를 사용해서는 안된다.
Javascript를 사용하여 페이지에서 사각형 영역에 직접 그래픽을 그린다.
경로, 사각형, 원, 문자를 그리기 위한 method가 있음.
Canvas를 사용하기 위해서 HTML 파일에서 Canvas를 정의해야 합니다.
<body>
<canvas id = "myCanvas" width="400" height="200"></canvas>
</body>
JavaScript에는 Canvas 태그에 엑세스하고 HTML5 Canvas API와 통신하여 그래픽을 그리는 코드를 작성해야 합니다. JavaScript는 Canvas id를 사용하여 Canvas를 식별합니다.
var canvas = document.getElementById("myCanvas");
//myCanvas에 해당하는 모든 element를 저장합니다.
var context = canvas.getContext("2d");
//canvas에서 사용할 Context를 지정합니다.
선을 그리기 위해 Canvas는 beginPath(), moveTo(), lineTo()를 이용합니다. 현재 경로를 재설정하고, 선의 시작점과 끝점을 정해줍니다.
//blue line with round ends
context.beginPath();//현재 경로를 재설정
context.moveTo(50, 50);//새 하위 경로가 시작하는 지점을 표시
context.lineTo(300,50);//선의 끝점을 표시
context.lineWidth = 10;//선의 굵기 변경
context.strokeStyle = "#0000FF";//선의 색상 변경
context.lineCap = "round";//선의 끝부분을 설정. 둥글거나 네모진 경우 선의 너비만큼 길이가 증가. butt가 디폴트.
context.stroke();//실제로 캔버스의 선을 칠한다.
사각형을 그리기 위해 아래의 세가지 method를 이용합니다.
context.fillRect(25,25,50,50);//채워진 사각형을 그린다.
context.clearRect(35,35,30,30);//주어진 영역을 지운다.
context.strokeRect(100,100,50,50);// 사각형의 윤곽선을 그린다.
원을 그리기 위해 arc(centerX, centerY, radius, startAngle, endAngle, anticockwise)를 이용합니다. 여기서 centerX, Y는 원의 중심 좌표, radius는 반지름을 뜻합니다. startAngle과 endAngle은 라디안 단위로 호의 시작점과 끝점을 똣하고, anticlockwise는 boolean값으로, 해당 값이 true면 시계 반대 방향, false면 시계 방향을 뜻합니다.
function drawCircle(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(350,350);
var centerX = 450;
var centerY = 375;
var radius = 70;
context.beginPath();
context.arc(centerX,centerY,radius,0,2*Math.PI,false);
context.fillStyle = "#800000";
context.fill();//원 안을 칠한다.
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
};
원 외에도 2차 곡선, 베지어 곡선도 method를 통해 그릴 수 있습니다. 2차 곡선은 시작점과 제어 지점(controlX,Y), 끝점(endX,Y)으로 정의합니다. 베지어 곡선의 경우에는 두 개의 제어 지점이 있습니다.
context.moveTo(X,Y);
context.quadraticCurveTo(controlX,controlY,endX,endY);
context.moveTo(X,Y);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
이동, 크기 조정 및 회전은 각각 translate(), scale(), rotate() method를 이용합니다. translate(x,y)에서 x,y는 이미지가 움직여야할 픽셀의 수를 뜻합니다. scale(x,y)에서 x,y는 원본 크기 배율입니다. rotate(angle)은 angle의 크기에 맞춰 이미지를 돌립니다.
Canvas에서 그라데이션은 createLinearGradient()와 ceateradialGradient() 두가지 유형을 사용할 수 있습니다.
createLinearGradient(startX,startY,endX,endY)은 시작점과 끝점의 좌표를 가집니다.
ceateradialGradient(x0,y0,r0,x1,y1,r1)은 첫 원의 중심 좌표와 반경, 두 번째 원의 중심 좌표와 반경을 가집니다.
addcolorStop(offset, color)를 이용하여 0과 1 사이의 오프셋을 지정할 수 있으며, 이를 통해 해당 color의 표시 중지를 지정해 다양한 색상으로 전환이 가능합니다.
//Gradient on a diagonal
var fillColordiagonal = context.createLinearGradient(50, 200, 100, 450);
//Gradient colors
fillColordiagonal.addColorStop(0.2,"red");
fillColordiagonal.addColorStop(0.4,"black");
fillColordiagonal.addColorStop(0.6,"green");
fillColordiagonal.addColorStop(0.75,"yellow");
//Assign gradient object to fillstyle
context.fillStyle = fillColordiagonal;
//Draw rectangle
context.fillRect(50,225,100,250);
//Draw radial gradient
fillColorRadial = context.createRadialGradient(450, 300, 0, 450, 300, 200);
fillColorRadial.addColorStop(0,"red");
fillColorRadial.addColorStop(0.2,"black");
fillColorRadial.addColorStop(0.4,"green");
fillColorRadial.addColorStop(0.7,"yellow");
context.fillStyle = fillColorRadial;
context.rect(300,200,500,400);
context.fill();
drawImage() method를 이용하면, 이미지를 잘라서 원하는 크기로 배치할 수 있습니다.
drawImage(image, dx, dy)는 해당 좌표에 이미지를 그립니다.
drawImage(image, dx, dy, dw, dh)는 해당 좌표에 이미지를 주어진 너비와 높이에 맞게 그립니다.
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)는 원본 이미지의 해당 좌표부터 시작하는 사각형 영역을 오려내어 주어진 좌표에 너비와 높이에 맞게 이미지를 그립니다.
var imageObj = new Image();
imageObj.onload = function(){
//draw image to cover the entire canvas
context.drawImage(imageObj,0,0,600,400);
//draw small image in bottom right corner
context.drawImage(imageObj, 300, 200, 300, 200);
jbbartram-illu
turnnoffyourmind
tangentwithtanner
izzy806
ellievsbear
annaxmalina
romaincrisis