전체 글364 그림자와 그라데이션 구현하기 그림자와 그라데이션 구현은 알아두면 유용하게 쓰일 것 같다. 그림자를 구현하기 위해서 필요한 4개의 속성에는 Context.shadowColor : 그림자와 색상을 지정. 16진수와 RGB값 모두 사용가능하다. Context.shadowOffsetX : 그림자의 가로 위치를 지정해 준다. Context.shadowOffsetY : 그림자의 세로 위치를 지정해 준다. Context.shadowBlur : 그림자를 어느 정도 흐리게 할지 정해 준다. 그라데이션을 구현하기 위해서 필요한 2가지 메소드 createLinearGradient - x0, y0, x1, y1 - 선형 그라데이션 creatRadialGradient - x0, y0, r0, x1, y1, r1 - 원형 그라데이션 한가지 더 알아 두어야 .. 2011. 11. 5. Canvas3 선 긋기 기본적으로 선을 그으려면 ctx.beginPath(); //새로운 도형을 그림 ctx.lineTo(10, 10); //선이 시작할 좌표 설정 ctx.lineTo(100, 100); //선이 끝나는 곳 좌표 설정 ctx.stroke(); //선 긋기 요게 기본이다. 여기에다 lineTo로 라인을 하나 더 그리면 이전 좌표에 연결해서 선이 그려진다. ctx.stroke(); 전에 ctx.closePath(); 를 하면 도형 그리기가 종료되고, 선 긋기가 종료된 시점과 선 긋기가 최초로 시작된 지점이 연결된다. ctx.fill();을 사용하면 도형의 색을 채울 수 있고, ctx.stroke();를 사용하면 안이 채워지지는 않고 테두리만 그려진 삼각형이 완성된다. 한 Canvas 안에 선 두개 이상을 그릴때는 .. 2011. 11. 5. Canvas2 사각형 그리기 그전에 해 놓은 준비된 캔버스에 ctx.fillStyle = "rgb(0,0,255)"; //어떤 색을 채울 것인지 RGB값 설정 ctx.fillRect(10, 10, 100, 100); //사각형 그리기 시작점, 끝점 좌표 설정 추가하면 되는데 여기서 ctx.fillStyle에 rgba가 들어가도 되는데 그렇게 되면 앞에 숫자 세곳은 rgb가 되고 네번째 숫자는 a(투명도)가 된다. 그래서 0은 완전투명, 1은 불투명, 0.5는 반투명이 된다. 그리고 rgb는 '#FFFFFF'와 같이 16진수 코드를 사용할수도 있다. Canvas에 사각형을 그릴 때 사용되는 함수의 속성에는 fillRect - 가득 찬 사각형을 그릴 때 사용 strokeRect - 사각형의 테두리만 그릴 때 사용 clearRect - .. 2011. 11. 4. Canvas1 그림 그리기 준비 1. 페이지가 로드되면 캔버스에 그림이 그려지도록 준비 완료 결과 화면 : 아직은 본격적으로 그림을 그리지 않은 상태라서 검정색 박스 하나만 나타난다. 그리고 canvas 요소는 기본적으로 테두리나 배경선을 가지고 있지 않기 때문에 스타일시트를 이용해서 테두리 경계선을 넣어주었습니다. 2011. 11. 4. 시멘틱 웹 [semantic web] 요약 - 컴퓨터가 정보자원의 뜻을 이해하고, 논리적 추론까지 할 수 있는 차세대 지능형 웹. 본문 - 현재의 컴퓨터처럼 사람이 마우스나 키보드를 이용해 원하는 정보를 찾아 눈으로 보고 이해하는 웹이 아니라, 컴퓨터가 이해할 수 있는 웹을 말한다. 즉 사람이 읽고 해석하기에 편리하게 설계되어 있는 현재의 웹 대신에 컴퓨터가 이해할 수 있는 형태의 새로운 언어로 표현해 기계들끼리 서로 의사소통을 할 수 있는 지능형 웹이다. 원리는 사람들이 이해할 수 있도록 자연어 위주로 되어 있는 현재의 웹 문서와 달리, 정보자원들 사이에 연결되어 있는 의미를 컴퓨터가 이해할 수 있는 형태의 언어로 바꾸는 것이다. 이렇게 되면 컴퓨터가 정보자원의 뜻을 해석하고, 기계들끼리 서로 정보를 주고받으면서 자체적으로 필요한 일을 처.. 2011. 11. 4. 블록레벨 요소와 인라인 요소 HTML 문서에는 블록레벨(black level) 요소와 인라인(inline)요소라고 하는 두 개의 큰 흐름의 줄기가 있다. 블록레벨 요소 나 , 과 같은 요소들은 블록레벨 요소이다. 블록레벨 요소의 특징은 줄 바꿈 태그인 과 같은 요소를 쓰지 않아도 스스로 줄 바꿈이 된다는 데 있다. 이 요소들은 기본적으로 문서 내에서 가로로 흐르지 않고 세로로 흐른다. 그리고 주변에 일정량의 공간을 만든다. 또한 너비를 지정해 주지 않으면 풀사이즈가 되어 가로로 가득 찬다. CSS를 적용하지 않고 이 요소들을 보면 세로로 쭉 나열되는 것을 볼 수 있다. 블록레벨 요소는 가로, 세로 일정량의 여백을 가지고 있는데 이것은 브라우저마다 조금씩 다르다. 인라인 요소 , , 과 같은 요소들은 인라인 요소이다. 이 요소들의 특.. 2011. 11. 4. 이전 1 ··· 55 56 57 58 59 60 61 다음
