2011.09.06 08:30

5.2 HTML5 Canvas: Shadow

HTML5 2011.09.06 08:30
지난번 글에서 캠퍼스에서 사각형을 어떻게 그릴 수 있는가에 대해서 정리를 했다면 이번 글에서는 사각형에 어떻게 그림자를 그리는 가에 대한 설명입니다.
 그림자를 그리는데에는 shadowOffSetX, shadowOffSetY, shadowBlur, shadowColor 이렇게 네개의 속성을 사용할 수 있습니다.

Context properties Descriptions
shadowOffsetX Horizontal distance (x-axis) between the shadow and the shape in pixel.
shadowOffsetY Vertical distance (y-axis) between the shadow and the shape in pixel.
shadowBlur How blur you want your shadow to be.
shadowColor Obviously, this is to set the color of your shadow

예제를 보면 확실히 쉽게 이해 될 것 같습니다.

<div><canvas id="c8" width="200" height = "200" style="border:solid 1px #000000;"></canvas></div>

<script>
var c8 = document.getElementById("c8");
var c8_context = c8.getContext("2d");

function draw_rectangle() {
c8_context.
shadowOffsetX = 5;
c8_context.
shadowOffsetY = 5;
c8_context.
shadowBlur = 10;
c8_context.shadowColor = "DarkGoldenRod";
c8_context.fillStyle = "Gold";
c8_context.fillRect(20, 20, 100, 120);
}
window.onload = draw_rectangle();
</script>

위의 예제를 보면 그림자의 위치는 X, Y 각각 5 만큼 공간을 띄우고 흐림의 정도를 10단계로 설정하고 컬러는 DarkGoldenRod로 지정하는 것을 볼 수 있습니다. 이에 따른 결과물은 다음과 같습니다.

깔끔하게 나오네요 ^^

김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


HTML5 강좌 전체 목록
  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. Web form 2.0
    Input Attr: Placeholder
    Input Attr: Autofocus
    Input Attr: Required field
    Input Attr: DataList
    Input Type: Search
    Input Type: Email, URL, Phone
    Input Type: Range
    Input Type: Number
    Input Type: Date
    Input Type: Color
  7. Towards Semantic Web
    Semantic <mark>
    Semantic <time>
    Semantic <meter>
    Semantic <progress>
    Semantic <section>
    Semantic <header>
    Semantic <footer>
    Semantic <nav>
    Semantic <article>
    Semantic <aside>
저작자 표시 변경 금지
신고


티스토리 툴바