으하하 Html5 공부를 시작했습니다.

아무래도 앞으로(사실 얼마나 걸릴지는 알 수도 없지만 =_=..) Html 5 을 이용해서 하이브리드 앱(특히 모바일)을 개발하게 될 것 같아서 미리 맛보는 Html 5 이제 시작합니다. 으하하하하

머 별로 공부는 안 했지만 공부 하는 데로 바로 공유(메모) 하려고 합니다.

그럼 이제 시작~ 뿅

그 첫 번째로 Canvas 위에서 사각형을 드래그 하는듯한 예제 입니다. (실제로 드래그를 하는 것이 아니라 계속 위치를 변경해서 새로 그려줍니다.)

우선 실행 화면은 다음과 같습니다. (테두리 안에서 마우스 클릭 후에 움직여봐주세용 :-D)

x : y :

코드는 다음과 같습니다.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF8" />
    <title>캔버스 테스트</title>
    <script type="text/javascript">
 
        //백그라운드 컬러
        var backgroundColor = "rgb(255,255,255)";
 
        //사각형 컬러
        var rectColor = "rgb(0,255,0)";
 
        //클릭이 되었는지를 기억
        var isClicked = false;
 
        var rectWidth = 100;
        var rectHeight = 100;
 
        var showMousePoint = function (x, y) {
            var inputX = document.getElementById('inputX');
            var inputY = document.getElementById('inputY');
 
            inputX.value = x;
            inputY.value = y;
        }
 
        var mouseMove = function (e) {
            if (isClicked == false)
                return;
 
            var canvas = document.getElementById('myCanvas');
            var canvasContext = canvas.getContext('2d');
 
            if (canvasContext != null) {
 
 
                canvasContext.fillStyle = backgroundColor;
                canvasContext.fillRect(0, 0, canvas.width, canvas.height);
 
                canvasContext.fillStyle = rectColor;
                canvasContext.fillRect(e.offsetX - rectWidth / 2, e.offsetY - rectHeight / 2, rectWidth, rectHeight);
            }
 
            showMousePoint(e.offsetX, e.offsetY);
 
 
        }
        var mouseDown = function (e) {
            isClicked = true;
        }
 
        var mouseUp = function (e) {
            isClicked = false;
        }
    </script>
    <style type="text/css">
        #myCanvas
        {
            border: 1px solid #000000;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="500" height="200" onmousemove="mouseMove(event)" onmousedown="mouseDown(event)"
        onmouseup="mouseUp(event)"> 해당 브라우저는 Html 5 을 지원하지 않습니다  </canvas>
    <br />
    <input type="text" id="inputX" />
    <input type="text" id="inputY" />
</body>
</html>

머 별거 없습니다. 마우스 다운/무브/업 이벤트를 처리해서 현재 클릭 중이라면 무브시에 해당 위치에 사각형을 계속 그려주고 있습니다.

이건 Silverlight에서 객체를 drag/drop을 할 때 보통 사용하는 로직인데 머 여기서도 비슷하게는 되네용.

이건 그냥 Canvas에서 장난을 쳐본거구요. Html 5 에 새로 추가된건지는 모르겠지만 Draggable이던가? 하는 프로퍼티가 있어서 해당값을 true로 해주면 해당 객체가 이동을 하더라구요. 요건 다음에 한 번 알아 보도록 하겠습니다.

html5 참... 참.... -_-ㅋ

은광

으하하 Html5 공부를 시작했습니다.

티스토리툴바