블로그 이미지
Flying Mr.Cheon youGom

Recent Comment»

Recent Post»

Recent Trackback»

« 2024/5 »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
 
 

모바일 웹에서 확대 기능 막기, 사이즈 고정하기

프로그래밍/HTML5 | 2012. 1. 11. 23:30 | Posted by youGom
모바일 화면의 사이즈및 초기설정을 위한 태그.

<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;" /> 

initial-scale : 초기 줌 배율 설정
maximum-scale : 최대 줌 배배 설정
minimum-scale : 최소 줌 배율 설정
user-scalable : 사용자가 확대/축소 가능여부
저작자표시 비영리 변경금지

'프로그래밍 > HTML5' 카테고리의 다른 글

1.2.4 HTML5 Canvas Line Cap Tutorial  (0) 2012.01.09
1.2.3 HTML5 Canvas Line Color Tutorial  (0) 2012.01.09
1.2.2 HTML5 Canvas line width ( 선 너비 / 굵기 ) 튜토리얼  (0) 2012.01.09
1.2.1 HTML5 Canvas Line Tutorial  (0) 2012.01.09
1.1.1 HTML5 Canvas Element Tutorial  (0) 2012.01.09
:

1.2.4 HTML5 Canvas Line Cap Tutorial

프로그래밍/HTML5 | 2012. 1. 9. 10:34 | Posted by youGom

http://www.html5canvastutorials.com/tutorials/html5-canvas-line-caps/

html5 canvas line에 cap을 추가 할 수 있다.
cap은 다음 셋중 하나를 선택할 수 있다; butt, round, square.

context.lineCap=[value];


아래 링크로 예제를 확인 할 수 있다.
http://www.html5canvastutorials.com/demos/tutorials/html5_canvas_line_caps/


window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    // butt line cap (top line)
    context.beginPath();
    context.moveTo(200, canvas.height / 2 - 50);
    context.lineTo(canvas.width - 200, canvas.height / 2 - 50);
    context.lineWidth = 20;
    context.strokeStyle = "#0000ff"; // line color
    context.lineCap = "butt";
    context.stroke();
 
    // round line cap (middle line)
    context.beginPath();
    context.moveTo(200, canvas.height / 2);
    context.lineTo(canvas.width - 200, canvas.height / 2);
    context.lineWidth = 20;
    context.strokeStyle = "#0000ff"; // line color
    context.lineCap = "round";
    context.stroke();
 
    // square line cap (bottom line)
    context.beginPath();
    context.moveTo(200, canvas.height / 2 + 50);
    context.lineTo(canvas.width - 200, canvas.height / 2 + 50);
    context.lineWidth = 20;
    context.strokeStyle = "#0000ff"; // line color
    context.lineCap = "square";
    context.stroke();
};




 

저작자표시 비영리 변경금지

'프로그래밍 > HTML5' 카테고리의 다른 글

모바일 웹에서 확대 기능 막기, 사이즈 고정하기  (1) 2012.01.11
1.2.3 HTML5 Canvas Line Color Tutorial  (0) 2012.01.09
1.2.2 HTML5 Canvas line width ( 선 너비 / 굵기 ) 튜토리얼  (0) 2012.01.09
1.2.1 HTML5 Canvas Line Tutorial  (0) 2012.01.09
1.1.1 HTML5 Canvas Element Tutorial  (0) 2012.01.09
:

1.2.3 HTML5 Canvas Line Color Tutorial

프로그래밍/HTML5 | 2012. 1. 9. 10:30 | Posted by youGom

http://www.html5canvastutorials.com/tutorials/html5-canvas-line-color/

html5 canvas line은 컬러를 설정할 수 있다.

context.strokeStyle=[value];

아래 창을 열어 예제를 확인 할 수 있다.
http://www.html5canvastutorials.com/demos/tutorials/html5_canvas_line_color/


window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    context.moveTo(100, 150);
    context.lineTo(450, 50);
    context.lineWidth = 10;
    context.strokeStyle = "#ff0000"; // line color
    context.stroke();
};
저작자표시 비영리 변경금지

'프로그래밍 > HTML5' 카테고리의 다른 글

모바일 웹에서 확대 기능 막기, 사이즈 고정하기  (1) 2012.01.11
1.2.4 HTML5 Canvas Line Cap Tutorial  (0) 2012.01.09
1.2.2 HTML5 Canvas line width ( 선 너비 / 굵기 ) 튜토리얼  (0) 2012.01.09
1.2.1 HTML5 Canvas Line Tutorial  (0) 2012.01.09
1.1.1 HTML5 Canvas Element Tutorial  (0) 2012.01.09
:

1.2.2 HTML5 Canvas line width ( 선 너비 / 굵기 ) 튜토리얼

프로그래밍/HTML5 | 2012. 1. 9. 10:21 | Posted by youGom

html5 canvas 선의 굵기를 정의 할 수 있다.
context.lineWidth=[value];

아래 주소를 클릭하면 예제가 보인다.
http://www.html5canvastutorials.com/demos/tutorials/html5_canvas_line_width/

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    context.moveTo(100, 150);
    context.lineTo(450, 50);
    context.lineWidth = 15;
    context.stroke();
};



저작자표시 비영리 변경금지

'프로그래밍 > HTML5' 카테고리의 다른 글

1.2.4 HTML5 Canvas Line Cap Tutorial  (0) 2012.01.09
1.2.3 HTML5 Canvas Line Color Tutorial  (0) 2012.01.09
1.2.1 HTML5 Canvas Line Tutorial  (0) 2012.01.09
1.1.1 HTML5 Canvas Element Tutorial  (0) 2012.01.09
HTML5, JS, Javascript, canvas  (0) 2012.01.09
:

1.2.1 HTML5 Canvas Line Tutorial

프로그래밍/HTML5 | 2012. 1. 9. 10:15 | Posted by youGom

http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

 moveTo(), lineTo(), strok()함수를 이용해서 선 하나 그릴 수 있다. 
  
context.moveTo(x,y);
context.lineTo(x,y);
context.stroke();

HTML5 Canvas Line Example

아래 링크에서 확인할 수 있다. ( 여기에 삽입이 잘 안됨 ㅠ )
 http://www.html5canvastutorials.com/demos/tutorials/html5_canvas_line_drawing/

indow.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    context.moveTo(100, 150);
    context.lineTo(450, 50);
    context.stroke();
};



저작자표시 비영리 변경금지

'프로그래밍 > HTML5' 카테고리의 다른 글

1.2.4 HTML5 Canvas Line Cap Tutorial  (0) 2012.01.09
1.2.3 HTML5 Canvas Line Color Tutorial  (0) 2012.01.09
1.2.2 HTML5 Canvas line width ( 선 너비 / 굵기 ) 튜토리얼  (0) 2012.01.09
1.1.1 HTML5 Canvas Element Tutorial  (0) 2012.01.09
HTML5, JS, Javascript, canvas  (0) 2012.01.09
:

1.1.1 HTML5 Canvas Element Tutorial

프로그래밍/HTML5 | 2012. 1. 9. 10:11 | Posted by youGom

http://www.html5canvastutorials.com/tutorials/html5-canvas-element/


html5에서 쓰는 canvas는 <div> <a> <table> 등과 같은 태그 엘레먼트와 같은 것이다.
페이지 로드할 때, 단한번만 호출해 주면된다. 아래 예제이다.
<canvas id="myCanvas"></canvas>


Html5 Canvas Template

<!DOCTYPE HTML>
<html>
    <head>
        <script>
 
            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
 
                // do stuff here
            };
 
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="578" height="200">
        </canvas>
    </body>
</html>

DOM오브젝트로 접근한다. context는 GetContext()함수를 호출해서 2d context를 얻어낸다.
덧붙여 말하자면, 그래픽스 해본 사람은 대략 무슨 의미인지, 코드만 봐도 알것이다.
처음 본 사람이라면. context를 화면에 그려줄 메모리 공간이라고 이해하면 된다. 즉 스케치북의 도화지라고 생각하면 이해하기 쉽다. 스케치북의 도화지도 없이 허공에다 그림을 그릴 수 없다.
위 코드는 이제 그림을 그릴 준비를 마친것이다. 화면에는 아무것도 출력되지 않는다.
크기가 ( 넓이 ) 578, ( 높이 ) 200인 흰색 도화지 하나가 준비 됐을 뿐이다.

저작자표시 비영리 변경금지

'프로그래밍 > HTML5' 카테고리의 다른 글

1.2.4 HTML5 Canvas Line Cap Tutorial  (0) 2012.01.09
1.2.3 HTML5 Canvas Line Color Tutorial  (0) 2012.01.09
1.2.2 HTML5 Canvas line width ( 선 너비 / 굵기 ) 튜토리얼  (0) 2012.01.09
1.2.1 HTML5 Canvas Line Tutorial  (0) 2012.01.09
HTML5, JS, Javascript, canvas  (0) 2012.01.09
:

HTML5, JS, Javascript, canvas

프로그래밍/HTML5 | 2012. 1. 9. 10:04 | Posted by youGom

프로그래밍이란 도메인 아래, HTML5에 대한 포스팅을 하려고 한다.
구글링하다 HTML5 강좌라고 검색하자마자 http://www.html5canvastutorials.com/ 라는 사이트가 바로 눈에 들어왔다.
메뉴를 보는 순간 굳이 여러 사이트나, 책을 보는 것 보다 여기 사이트 하나만 봐도 충분하겠구나 싶었다.
그런데, 순간 드는 생각이, 이 사이트가 영어로 되어 있었다.
이왕 보는 김에, 언어 장벽으로 인해 도움이 필요한 분들도 있을것 같기도 해서.. 겸사겸사 포스팅 해보려고한다.
위 사이트의 내용을 옮기면서, 그대로 쓰지 않고, 약간의 주관적으로 재해석하여 쓰려고 한다. ( 사실 이게 적기 편해서 ^^; )

저작자표시 비영리 변경금지

'프로그래밍 > HTML5' 카테고리의 다른 글

1.2.4 HTML5 Canvas Line Cap Tutorial  (0) 2012.01.09
1.2.3 HTML5 Canvas Line Color Tutorial  (0) 2012.01.09
1.2.2 HTML5 Canvas line width ( 선 너비 / 굵기 ) 튜토리얼  (0) 2012.01.09
1.2.1 HTML5 Canvas Line Tutorial  (0) 2012.01.09
1.1.1 HTML5 Canvas Element Tutorial  (0) 2012.01.09
:
 

티스토리툴바