프로그램/html52013. 12. 10. 17:27

html5 canvas 사각형 선 그리기 strokeRect

반응형

 

<!DOCTYPE HTML>
<html>
 <head>
  <title>HTML5 Canvas 사각형 선 그리기</title>
  <script type="text/javascript">
  var ctx;

  function init()
  {
   ctx = document.getElementById('canvas').getContext('2d');

   ctx.lineWidth = 1;
   ctx.strokeStyle = "rgb(0, 0, 0)";
   ctx.strokeRect(100, 50, 50, 50); // 사각형 그리기
  }
  </script>
 </head>
<body onLoad="init()">
 <canvas id="canvas" width="400" height="140" style="border:1px solid;">
  이 브라우저는 HTML5의 canvas 요소를 지원하지 않습니다.
 </canvas>
</body>
</html>

 

 

설명>

ctx.lineWidth = "선 굵기";

ctx.strokeStyle = "선 색상";

ctx.strokeRect(x위치, y위치, 넓이, 높이);

 

사각형 그리기 더보기

반응형
Posted by 은둔고수
프로그램/html52013. 12. 10. 17:03

html5 canvas 사각형 채워서 그리기 fillRect

반응형

 

<!DOCTYPE HTML>
<html>
 <head>
  <title>HTML5 Canvas 사각형 채워서 그리기</title>
  <script type="text/javascript">
  var ctx;

  function init()
  {
   ctx = document.getElementById('canvas').getContext('2d');

   ctx.fillStyle = "rgb(0, 0, 0)";
   ctx.fillRect(100, 50, 50, 50); // 사각형 그리기
  }
  </script>
 </head>
<body onLoad="init()">
 <canvas id="canvas" width="400" height="140" style="border:1px solid;">
  이 브라우저는 HTML5의 canvas 요소를 지원하지 않습니다.
 </canvas>
</body>
</html>

 

설명>

ctx.fillRect(x위치, y위치, 넓이, 높이);

 

사각형 그리기 더보기

반응형
Posted by 은둔고수
프로그램/html52013. 12. 10. 16:35

html5 canvas text font color 글자 색상 fillStyle

반응형

 

<!DOCTYPE HTML>
<html>
 <head>
  <title>HTML5 Canvas Text Font Color</title>
  <script type="text/javascript">
  var ctx;

  function init()
  {
   ctx = document.getElementById('canvas').getContext('2d');
   ctx.font = "20px Gulim";
   ctx.fillText("Hello World - 보통 20px 굴림", 20, 30);
   ctx.font = "bold 20px Gulim";
   ctx.fillText("Hello World - 굵게 20px 굴림", 30, 60);
   ctx.font = "italic 20px Gulim";
   ctx.fillText("Hello World - italic 20px 굴림", 40, 90);
   ctx.font = "20px Gulim";
   ctx.fillStyle = "red";
   ctx.fillText("Hello World - 보통 20px 굴림", 50, 120);
  }
  </script>
 </head>
<body onLoad="init()">
 <canvas id="canvas" width="400" height="140" style="border:1px solid;">
  이 브라우저는 HTML5의 canvas 요소를 지원하지 않습니다.
 </canvas>
</body>
</html>

 

설명>

ctx.fillStyle = "색상";

ctx.fillStyle = "#ff0000";

ctx.fillStyle = "rgb(255, 0, 0)";

ctx.fillStyle = "red";

반응형
Posted by 은둔고수
프로그램/html52013. 12. 10. 15:42

html5 canvas text font 글자 fillText

반응형

<!DOCTYPE HTML>
<html>
 <head>
  <title>HTML5 Canvas Text Font</title>
  <script type="text/javascript">
  var ctx;

  function init()
  {
   ctx = document.getElementById('canvas').getContext('2d');
   ctx.font = "20px Gulim";
   ctx.fillText("Hello World - 보통 20px 굴림", 20, 30);
   ctx.font = "bold 20px Gulim";
   ctx.fillText("Hello World - 굵게 20px 굴림", 30, 60);
   ctx.font = "italic 20px Gulim";
   ctx.fillText("Hello World - italic 20px 굴림", 40, 90);
   ctx.font = "20px Gulim";
   ctx.fontStyle = "red";
   ctx.fillText("Hello World - 보통 20px 굴림", 50, 120);
  }
  </script>
 </head>
<body onLoad="init()">
 <canvas id="canvas" width="400" height="150" style="border:1px solid;">
  이 브라우저는 HTML5의 canvas 요소를 지원하지 않습니다.
 </canvas>
</body>
</html>

 

설명>

ctx.font = "글자 스타일(normal, italic, bold) 지정, 글자 크기, 글자 종류"; // 기본 normal

ctx.fillText("출력할 내용", x위치, y위치);

반응형
Posted by 은둔고수

티스토리툴바