one-person developer

/*둥근모서리 표현*/
.box_round {
     -moz-border-radius: 12px; /* FF1+ */
     -webkit-border-radius: 12px; /* Saf3+, Chrome */
      border-radius: 12px; /* Opera 10.5, IE 9 */
}




/*박스음영*/
.box_shadow {
  -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
  -webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */
  box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */
  filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff'); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff')"; /* IE8 */
}


/*백그라운드 그라디언트*/
.box_gradient {
  background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #444444)
                             ,color-stop(1, #999999)); /* Saf4+, Chrome */
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999'); 
         /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999')";
        /* IE8 */
}




/*투명효과*/
.box_rgba {
  background-color: #B4B490;
  background-color: rgba(180, 180, 144, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome */
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490'); 
         /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490'
                 ,endColorstr='#99B4B490')"; /* IE8 */
}




/*박스모델 회전*/
.box_rotate {
  -moz-transform: rotate(7.5deg);  /* FF3.5+
  -o-transform: rotate(7.5deg);  /* Opera 10.5
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome
   filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8
}




/*웹폰트*/
@font-face {
  font-family: 'WebFont';
  src: url('myfont.eot');  /* IE6+ */
  src: local('?'),
        url('myfont.woff') format('woff'),  /* FF3.6 */
        url('myfont.ttf') format('truetype');  /* Saf3+,Chrome,Opera10+ */
}

선을 그릴땐 strokeStyle 속성, 채우기를 할땐 fillStyle 속성을 사용하여
색상이나 스타일을 지정한다.

<script type="text/javascript">
var canvas          = document.getElementById("canvas13");
var context         = canvas.getContext("2d");
    context.strokeStyle = "#0033FF";    // 선에 색상 지정하기
    context.beginPath();
    context.rect(0, 0, 110, 60); 
    context.stroke();
    context.closePath();
 
    context.fillStyle   = "#FFCC00";    // 채우기에 색상 지정하기
    context.beginPath();
    context.fillRect(5, 5, 100, 50); 
    context.stroke();
    context.closePath();
 
    context.strokeStyle = "#FF0000";    // 선에 색상 지정하기
    context.beginPath();
    context.arc(30, 30, 20, 0, 2 * Math.PI, true);
    context.stroke();
    context.closePath();
 
    context.fillStyle   = "#FF0000";    // 채우기에 색상 지정하기
    context.beginPath();
    context.arc(80, 30, 20, 0, 2 * Math.PI, true);
    context.fill();
    context.closePath();
</script>​